@charset "utf-8";
@import url("../font/load.css");


/* CSS Document */

body {
	font-size: min(1.1vw, 1.9rem);
	line-height: 1.73;
	letter-spacing: 0.12em;
	overflow-x: hidden;
}

/*========================================
headerの設定
==========================================*/

.head_contents{
	padding: min(2.82vw, 40px) 0 min(1.76vw, 25px);
}

.page_description{
	text-align: center;
	width: min(21vw, 308px);
	margin: 0 auto min(1.76vw, 25px);
}

.head_nav_list{
	line-height: 1;
}

.head_nav_list li:not(:last-child){
	margin-right: 50px;
}

.head_nav_list li a{
	position: relative;
	display: block;
	padding: min(0.6vw, 15px) 0;
}

.head_nav_list li a::before{
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%) scale(0);
	width: 100%;
	border-bottom: 2px solid #ffbe15;
	transition: .4s;
}

.head_nav_list li a:hover::before{
	transform: translateX(-50%) scale(1);
}

.head_fix{
	display: none;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	background: #fff;
	padding: min(1.2vw, 15px) 0;
	z-index: 100;
}

.head_fix::before{
	content: '';
	display: block;
	position: absolute;
	left: 0;
	bottom: -6%;
	width: 100%;
	padding-top: 6%;
	background: url(../img/deco_item03.png) repeat-x;
	background-size: contain;
	z-index: 5;
}

/*========================================
footerの設定
==========================================*/

footer{
	color: #fff;
	padding: 0 40px;
	background: #000;
}

.side_bnr{
	position: fixed;
	right: 0;
	bottom: 15%;
	display: inline-block;
	border-radius: 20px 0 0 20px;
	color: #fff;
	background: #000000;
	-webkit-writing-mode: vertical-rl;
	-moz-writing-mode: vertical-rl;
	-ms-writing-mode: vertical-rl;
	-writing-mode: vertical-rl;
	font-size: min(1.3vw, 2.0rem);
	padding: min(2.6vw, 35px) min(1.3vw, 17px);
	border: 2px solid #000;
	border-right: none;
	z-index: 100;
	border: 2px solid #333;
	border-right: none;
	transition: .3s;
	overflow: hidden;
}

.side_bnr::before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	background: #fff;
	transform-origin: 100% 50%;
	transform: scaleX(0);
	transition: transform ease .6s;
}
.side_bnr:hover {
	color: #000;
}

.side_bnr:hover::before {
	transform-origin: 0% 50%;
	transform: scaleX(1);
}

.f_inner{
	max-width: 1080px;
	width: 100%;
	margin: 0 auto;
	padding: 70px 0 40px;
	border-bottom: 1px solid #fff;
}

.f_logo{
	width: min(24vw, 345px);
	margin-bottom: 20px;
}

.f_btn{
	margin-bottom: 20px;
}

.f_ads{
	margin-bottom: 20px;
}

.f_btn a{
	display: flex;
	justify-content: center;
	align-items: center;
	width: min(20vw, 290px);
	height: min(4.23vw, 60px);
	color: #000;
	background: #fff;
}

.f_btn a:not(:last-child){
	margin-right: 20px;
}

.f_sns a{
	display: block;
	width: min(4.23vw, 60px);
}

.f_sns a:not(:last-child){
	margin-right: 20px;
}

.f_nav{
	margin-right: 50px;
}

.f_nav_list li{
	line-height: 1;
	font-size: min(1.34vw, 1.9rem);
}

.f_nav_list li:not(:last-child){
	margin-bottom: min(2.46vw, 35px);
}

.copyright_note{
	margin-bottom: 10px;
}

#copyright{
	padding: 20px 0;
	text-align: center;
	font-size: min(0.99vw, 1.4rem);
}


/*========================================
メインビジュアルの設定
==========================================*/

.main_viusal{
	position: relative;
    padding: 0 40px;
}

.main_visual_img{
    max-width: 2600px;
    margin: 0 auto;
}

/*
.main_viusal::before{
	content: '';
	display: block;
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	padding-top: 6%;
	background: url(../img/deco_item01.png) repeat-x;
	background-size: contain;
	z-index: 5;
}
*/

.main_visual_img img{
	max-width: 100%;
	width: 100%;
	height: auto;
}


/*========================================
TOPページ
==========================================*/

/*---------------------
about_contents
----------------------*/

.about_contents{
	position: relative;
	padding: 4% 40px 10%;
}

.about_contents::before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	padding-top: 6%;
	background: url(../img/deco_item02.png) repeat-x;
	background-size: contain;
	z-index: 5;
}

.about_ttl .cmn_ttl_en{
	width: min(12.25vw, 174px);
}

.about_block{
	padding-right: 20px;
}

/*---------------------
various_contents
----------------------*/

.various_contents{
	position: relative;
	padding: 50px 60px 11%;
	background: #fff393;
}

.various_contents::before{
	content: '';
	display: block;
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	padding-top: 6%;
	background: url(../img/deco_item01.png) repeat-x;
	background-size: contain;
	z-index: 5;
}

.various_contents::after{
	content: '';
	display: block;
	position: absolute;
	top: 100px;
	right: 9%;
	width: min(43.76vw, 735px);
	height: min(24.83vw, 452px);
	background: url(../img/various_deco01.png) no-repeat center bottom;
	background-size: contain;
	z-index: 5;
}

@media screen and (max-width: 1920px) {
	.various_contents::after{
		right: 20px;
	}
}

.various_contents .cmn_ttl{
	margin-bottom: 60px;
}

.various_ttl .cmn_ttl_en{
	width: min(19.44vw, 276px);
}

.various_about{
	position: relative;
	align-items: center;
}

/*
.various_about::after{
	content: '';
	display: block;
	position: absolute;
	top: 50px;
	right: 20px;
	width: min(43.76vw, 735px);
	height: min(24.83vw, 452px);
	background: url(../img/various_deco01.png) no-repeat center bottom;
	background-size: contain;
	z-index: 5;
}
*/

.various_about_img{
	position: relative;
}

.various_about_img01{
	position: relative;
	width: min(38vw, 628px);
	margin-right: min(5.2vw, 100px);
	z-index: 5;
}

.various_about{
	flex-wrap: nowrap;
}

.various_about_block{
	width: min(49vw, 700px);
}

.various_about_block_ttl{
	font-weight: 500;
	font-size: min(1.4vw, 2.6rem);
	margin-bottom: 30px;
}

.various_about_label{
	position: absolute;
	display: inline-block;
	left: 0;
	bottom: 20px;
	line-height: 1.5;
	background: #fff;
	padding: 10px 20px;
	font-weight: 600;
	font-size: min(1.62vw, 2.3rem);
}

.various_gallery{
	position: relative;
	margin-top: 15px;
	margin-bottom: 15px;
	align-items: flex-start;
	justify-content: center;
}

.various_gallery .various_about_img{
	position: relative;
	z-index: 3;
	width: min(25.49vw, 362px);
}

.various_gallery .various_about_img:not(:nth-child(3n)){
	margin-right: 15px;
}

.various_gallery .various_about_img:nth-last-child(4n){
	margin-bottom: 15px;
}

.various_gallery .various_about_label{
	font-size: min(1.2vw, 1.92rem);
}

.various_gallery .various_about_img_big{
	/*width: min(34vw, 628px);*/
	position: relative;
	z-index: 0;
}

.various_about_end{
	position: relative;
	flex-direction: row-reverse;
    align-items: center
	/*align-items: flex-end;*/
}

.various_about_end::before{
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: -105px;
    transform: translateY(-50%);
    width: min(18.22vw, 300px);
    height: min(29vw, 530px);
    background: url(../img/various_deco02.png) no-repeat center bottom;
    background-size: contain;
    z-index: 5;
}

@media screen and (max-width: 1650px) {
	.various_about_end::before{
        right: -60px;
        width: 18%;
        height: auto;
        padding-top: 32%;
	}
}

.various_about_end::after{
    content: '';
    display: block;
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate(-255%, 108%);
    width: min(23vw, 381px);
    height: min(28.28vw, 430px);
    background: url(../img/kinds_contents_deco.png) no-repeat center bottom;
    background-size: contain;
    z-index: 5;
}

.various_about_end .various_about_img{
    text-align: right;
    width: min(38vw, 628px);
    margin-left: min(5.2vw, 100px);
}

/*---------------------
kinds_contents
----------------------*/

.kinds_contents{
	position: relative;
	text-align: center;
	padding: 30px 40px 100px;
}

/*
.kinds_contents::before {
	content: '';
	display: block;
	position: absolute;
	top: -270px;
	left: 13%;
	width: min(23vw, 381px);
	height: min(28.28vw, 430px);
	background: url(../img/kinds_contents_deco.png) no-repeat center bottom;
	background-size: contain;
	z-index: 5;
}

@media screen and (max-width: 1920px) {
	.kinds_contents::after {
		left: 20px;
	}

}
*/

.kinds_contents_block{
	align-items: flex-start;
}

.kinds_item:not(:last-child){
	margin-right: 50px;
}

.kinds_item_ttl{
	margin: 0 auto 30px;
	width: min(13.05vw, 193px);
}

.kinds_item_type{
	font-size: min(1.8vw, 2.6rem);
	margin-bottom: 20px;
}

.kinds_item_type_detail{
	display: block;
	font-size: min(1.41vw, 2.0rem);
}

.kinds_item_img{
	width: min(26.48vw, 376px);
	margin: 0 auto 40px;
}

/*---------------------
product_contents
----------------------*/

.product_contents{
	padding: 100px 40px;
	background: #c8eef8;
}

.product_contents_block{
	max-width: 1080px;
}

.product_ttl{
	text-align: center;
	margin-bottom: 60px;
}

.product_ttl .cmn_ttl_en{
	margin-left: auto;
	margin-right: auto;
	width: min(22vw, 321px);
}

.product_ttl .cmn_ttl_txt{
	margin-left: 0;
}

.product_block{
	display: flex;
	flex-direction: column;
	width: 48%;
}

.product_block_ttl{
	font-size: min(1.62vw, 2.3rem);
	margin-bottom: 25px;
    font-weight: 500;
}

.product_tb{
	margin-bottom: 50px;
}

.product_tb tr{
	border-bottom: 1px solid #fff;
}

.product_tb th{
	width: 33%;
}

.product_tb th,
.product_tb td{
	padding: 7px 0;
}

.product_block_btn{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: min(21vw, 300px);
	height: min(4.3vw, 60px);
	transition: .5s;
	margin: auto auto 0;
	border-radius: 35px;
	background: #fff;
}

.product_block_btn::before{
	content: '';
	position: absolute;
	top: 50%;
	right: 25px;
	transform: translateY(-50%) rotate(90deg);
	transition: .5s;
	display: block;
	width: 0;
	height: 0;
	border-bottom: 8px solid #ffc600;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
}

.product_block_btn:hover{
	background: #ffc600;
	color: #fff;
}

.product_block_btn:hover::before{
	border-bottom-color: #fff;
}

/*---------------------
official_shop
----------------------*/

.official_shop{
	display: flex;
	justify-content: center;
	align-items: center;
	height: min(38.73vw, 550px);
	background: url(../img/official_shop_bg.jpg) no-repeat center / cover;
	background-attachment: fixed;
}

/*---------------------
Thought_contents
----------------------*/

.thought_ttl .cmn_ttl_en{
	width: min(10.92vw, 155px);
}

.thought_txt{
	width: min(55.38vw, 900px);
}

.thought_txt p:not(:last-child){
	margin-bottom: 30px;
}

/*---------------------
company_contents
----------------------*/

.company_contents{
	background: #ededed;
}

.company_ttl .cmn_ttl_en{
	width: min(13.73vw, 195px);
}

.company_tb {
	max-width: min(55.38vw, 900px);
	width: 100%;
}

.company_tb tr{
	border-bottom: 5px solid #ededed;
}

.company_tb th,
.company_tb td{
	padding: min(1vw, 15px) min(1.41vw, 20px);
}

.company_tb th{
	text-align: center;
	color: #fff;
	background: #000;
}

.company_tb td{
	background: #fff;
}

/*---------------------
contact_contents
----------------------*/

.contact_contents{
	padding: 100px 0;
	text-align: center;
}

.contact_contents_txt{
	font-size: min(1.55vw, 2.2rem);
	margin-bottom: 40px;
}

.contact_contents .cmn_btn{
	margin: 0 auto;
}