/*
Theme Name:		cocon
Theme URI:
Description:
Author:
Author URI:
Version:		1.0
License:
License URI:
*/
@font-face {
    font-family: "minionpro";
    src: url("font/minion-pro-regular.ttf") format("truetype");
}
@font-face {
    font-family: "mspgothic";
    src: url("font/ms-pgothic-regular.ttf") format("truetype");
    font-display: swap;
}
.minion{font-family:"minionpro";}
.outfit{font-family: "Outfit","mspgothic", "Noto Sans JP", sans-serif;}
:root{
	--h2-size:clamp(24px,2.5vw,34px);
	--h2-font:"Outfit","mspgothic", "Noto Sans JP", sans-serif;
	--h2-font2:"Outfit", "Noto Sans JP", sans-serif;
	--h2-weight:400;
	--h2-subsize:14px;
	--h2-subfont:"mspgothic";
	--minion-font:"minionpro", "Noto Sans JP", sans-serif;
	--font-yugothic:"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}
.foogallery .fg-caption {
	font-family:"Outfit", "Noto Sans JP", sans-serif !important;
}
img{-webkit-backface-visibility: hidden;}
body{background:#FCFAF4; font-family: "Noto Sans JP", sans-serif; padding:10vw 0 0 0; margin:0; color:#4B4B4B; font-feature-settings: "palt"; letter-spacing:0.1em;}

/*グローバルナビ*/
nav{background:none; margin:0 auto; width:100%; max-width:1300px; padding:0 100px; box-sizing:border-box;}
nav ul{list-style-type:none; padding:0; margin:0; display:flex; justify-content:space-between; align-items:center;}
nav ul li{}
nav li a{transition: 0.6s; line-height:100%; color:inherit; font-family: "Outfit","Noto Sans JP", sans-serif; font-weight:normal; font-size:13px; text-decoration:none; display:block; padding:0;}
nav li a:hover{opacity:0.6;}
#site-header{padding:0 0 20px 0; margin:0; position:fixed; top:0; width:100%; z-index:100; background:#FCFAF4;}
#site-header.open{background:none;}
#site-header-inner{width:100%; margin:0 auto; padding:2.5% 2.5% 0.5% 2.5%; box-sizing:border-box;}
.logo_container{display:flex; justify-content:space-between; align-items:center; padding:0 0 2% 0; box-sizing:border-box;}
.header_cta{display:flex; gap:20px;}
@media screen and (max-width:1190px) {
	.header_cta .instagram{display:none;}
	#site-header{padding:0;}	
}
@media screen and (max-width:580px) {
	#site-header-inner{padding:0;}
	.logo_container{padding:4%;}
}

.hamburger-wrapper{display:none;}
.hamburger-container{cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:8px;}
.hamburger-icon {width:40px; height:20px; position:relative; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:8px;}
.hamburger-icon .line{height:1px; background-color:#4b4b4b; border-radius:3px; transition:all 0.3s ease; position: relative;}
.hamburger-icon .line1{width: 40px;}
.hamburger-icon .line2{width: 30px;}
.hamburger-icon .line3 {width:20px;}
.menu-text {color:#4b4b4b; font-size:10px; font-weight:300; letter-spacing:3px; transition:opacity 0.3s ease;}
.hamburger-container.active .line {position: absolute; width: 35px; background-color:#fff;}
.hamburger-container.active .line1 {transform: rotate(20deg); top: 50%; left: 0;}
.hamburger-container.active .line2 {opacity: 0;}
.hamburger-container.active .line3 {transform: rotate(-20deg); top: 50%; left: 0;}
.hamburger-container.active .menu-text {opacity: 0; display:none;}

.fixed_menu_container{position: fixed; top: 0; left:100%; width: 100%; height: 100%; background: #462E06; z-index: 99; transition:left 1.2s cubic-bezier(0.190, 1.000, 0.220, 1.000);}
.fixed_menu_container .fixed_menu_container_inner{display:flex; align-items:center; justify-content:center; height:100%; flex-direction:column;}
.fixed_menu_container div ul{list-style-type:none; padding:0; margin:0;}
.fixed_menu_container div ul li{margin:20px 0; text-align:center;}
.fixed_menu_container div ul li a{text-decoration:none; color:#fff;}

.fixed_menu_container .fixed_menu_container_inner .footer_sns_nav{margin:5% 0 3% 0;}
.fixed_menu_container .fixed_menu_container_inner .footer_sns_nav ul{display:flex; justify-content:center; flex-direction:row;}
.fixed_menu_container .fixed_menu_container_inner .footer_sns_nav ul li{display:block; width:23px; height:24px; margin:0 10px;}
.fixed_menu_container .fixed_menu_container_inner .footer_sns_nav ul li a{display:block; width:100%;}
.fixed_menu_container .fixed_menu_container_inner .footer_sns_nav ul li a img{width:100%;}
.fixed_menu_container .fixed_menu_container_inner .online_shop a{background:url(img/onlineshop_arrow_right_brawn.png) no-repeat center right 20px #fff; background-size:5px; color:#462E06;}
.fixed_menu_container.open{left:0;}

@media screen and (max-width:1190px) {
	nav{display:none;}
	#site-header .online_shop{display:none;}
	.hamburger-wrapper{display:block;}

}

/*メインビジュアル*/
.banner_container{padding:1% 0 10% 0;}
#banner{background-size:100%; width:71.14%; height:auto; margin-left:auto; margin-right:auto; position:relative;}
#banner .catchphrase{position: absolute; bottom: -3%; left:2.25%; width: 48%; z-index:99;}
#banner .catchphrase img{width:90%;}
#banner .logo2{position: absolute; top: 50%; right: -11.5%; transform: translateY(-50%); width: 14.5%; z-index: 11;}
#banner .logo2 img{width:100%;}
#banner .scroll{width:25px; height:100px; overflow:hidden; position:absolute;  right:-70px;  bottom:4px;}
#banner .scroll .scroll_arrow{animation: slideinTop 5s ease-in infinite; width:9px; position:absolute; bottom:0; left:0;}
#banner .scroll img{width:100%;}
#banner .scroll span{font-family:var(--font-yugothic); font-weight:bold; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; position:absolute; font-size:10px; top:0; right:0;}
@keyframes slideinTop {
  0% {transform: translateY(-145px);}
  100% {transform: translateY(280px);}
}
.container{width:100%; margin:0; padding:0;}
#main{width:100%; box-sizing:border-box;}
@media screen and (max-width:1190px) {
	#banner .logo2{width:165px; right:-130px;}
}
@media screen and (max-width:686px) {
	.banner_container{padding:10% 0 25% 0;}
	#banner{width:100%; height:500px;}
	#banner .logo2{display:none;}
	#banner .scroll{display:none;}
	#banner .catchphrase{left: 50%; bottom:-4%; margin-left: -40%; width: 80%;}
	#banner .catchphrase img{width:100%;}
}

/*swiper*/
.swiper{height:calc(71.14vw * 0.5561);}
.swiper-wrapper img{width:100%; height:100%; object-fit:cover;}
.swiper-pagination{bottom:-10% !important;}
.swiper-pagination-bullet-active{background:#969696 !important;}
.swiper-pagination-bullet{width:10px !important; height:10px !important; margin:0 10px !important;}
@media screen and (max-width:686px) {
	.swiper{height:auto;}
	.swiper-wrapper{height:500px !important;}
	.swiper-pagination{bottom:-13vw !important;}
}

/*固定ページswiper*/
body.page .flex_image .swiper{height:auto;}
body.page .content .swiper-pagination{position:static;}
.content .flex .swiper-pagination-business-customers{text-align:center;}
.swiper-pagination-logo-flower{text-align:center;}
.swiper-pagination-flower-arrangement{text-align:center;}
.swiper-pagination-on-site-lesson{text-align:center;}
@media screen and (max-width:686px) {
	.content .flex .swiper-wrapper{height:auto !important;}
	.content .flex .swiper-pagination{bottom:auto !important;}
	body.page .swiper-wrapper{height:auto !important;}
}

/*フレームブーケについて*/
.about{background:#EFEFEA; padding:14.5% 0 12%;}
.about .inner{padding:0 5.2%; display:flex; align-items:center; justify-content:space-between;}
.about .inner .textbox{margin-right:40px;}
.about .inner .textbox h2{font-family:var(--h2-font); font-size:var(--h2-size); font-weight:var(--h2-weight); padding:0 0 30px 0; margin:0 0 30px 0; border-bottom:1px solid #4B4B4B;}
.about .inner .textbox h2 span{font-family:var(--h2-subfont); display:block; font-size:var(--h2-subsize); margin-top:10px;}
.about .inner .textbox .d01{font-size:clamp(14px,0.88vw,18px); font-weight:500; line-height:220%;}
.about .inner .textbox .d02{font-size:clamp(12px,0.78vw,14px); line-height:220%;}
.about .inner .moviebox{width:70%;}
.about .inner .moviebox video{width:100%;}
@media screen and (max-width:686px) {
	.about .inner{flex-direction: column-reverse;}
	.about .inner .moviebox{width:100%; margin-bottom:40px;}
	.about .inner .textbox{width:100%; margin-right:0;}
	.about .inner .textbox h2{width:fit-content;}
	.about .inner .textbox p br{display:none;}
}

/*gallery*/
.gallery{padding:14.5% 0 12%;}
.gallery .inner{padding:0 5.2%; position:relative;}
.gallery .inner h2{font-family:var(--h2-font); text-align:center; margin-bottom:70px; font-size:var(--h2-size); font-weight:var(--h2-weight);}
.gallery .inner h2 span{font-family:var(--h2-subfont); display:block; margin-top:10px; font-size:var(--h2-subsize);}
@media screen and (max-width:686px) {
	.gallery{padding:14.5% 0 28%;}
}
@media screen and (max-width:686px) {
	.gallery .inner h2{margin-bottom:8%;}
}
/*swiper2*/
.swiper2{overflow:hidden; height:51vw;}
.swiper2 .swiper-wrapper{height:auto !important;}
.swiper2 .swiper-slide{overflow:hidden;}
.swiper2 .swiper-slide video{width:100%; height:100%; object-fit:cover; margin-bottom:10px; border-radius:10px; }
@media screen and (max-width:1200px) {
	.swiper2{height:52vw;}
}
@media screen and (max-width:1024px) {
	.swiper2{height:75vw;}
}
@media screen and (max-width:686px) {
	.swiper2{height:85vw;}
}
@media screen and (max-width:480px) {
	.swiper2{height:130vw;}
}

.swiper2 .swiper-slide .gallery_item a{font-family: "mspgothic"; display:flex; align-items:center; background:#fff; padding:5px; border-radius:10px; text-decoration:none; color:inherit;}
.swiper2 .swiper-slide .gallery_item .gallery_item_image{width:64px; height:64px; margin-right:20px;}
.swiper2 .swiper-slide .gallery_item .gallery_item_image img{width:100%; height:100%; object-fit:cover;}
.swiper2 .swiper-slide .gallery_item .gallery_item_name{font-size:14px; margin-bottom:5px;}
.swiper2 .swiper-slide .gallery_item .gallery_item_price{font-size:14px;}

.swiper2 .swiper-slide {opacity: .3; transform: scale(.8) !important; transition: .7s;}
.swiper2 .swiper-slide img {height: auto; width: 100%;}
.swiper2 .swiper-slide-active {opacity: 1; transform: scale(1) !important; z-index: 1;}
.swiper2_nav{position:absolute; bottom:-60px; left:50%; margin-left:-50px; display:flex; justify-content:center; flex-direction:row-reverse; width:100px; }
.swiper2_nav .swiper-button-prev svg,
.swiper2_nav .swiper-button-next svg{display:none;}
.swiper2_nav .swiper-button-prev::after,
.swiper2_nav .swiper-button-next::after {
  bottom: 0;
  content: "";
  height: 0;
  margin: auto;
  position: absolute;
  top: 0;
  width: 0;
}
/* 前への矢印カスタマイズ */
.swiper2_nav .swiper-button-prev::after {
  border-bottom: 10px solid transparent;
  border-right: 15px solid #4B4B4B;
  border-top: 10px solid transparent;
}
/* 次への矢印カスタマイズ */
.swiper2_nav .swiper-button-next::after {
  border-bottom: 10px solid transparent;
  border-left: 15px solid #4B4B4B;
  border-top: 10px solid transparent;
}
/* 画像サイズ調整 */
.swiper2_nav .swiper-slide img {
  height: auto;
  width: 100%;
}
@media screen and (max-width:686px) {
	.swiper2_nav{bottom:-7%;}
}
@media screen and (max-width:480px) {
	.swiper2 .swiper-slide {transform: scale(1) !important;}
}
	
/*How to order*/
.howtoorder{padding:14.5% 0 12%; background:#EFEFEA;}
.howtoorder .inner{padding:0 5.2%; position:relative;}
.howtoorder .inner h2{font-family:var(--h2-font); text-align:center; margin-bottom:70px; font-size:var(--h2-size); font-weight:var(--h2-weight);}
.howtoorder .inner h2 span{font-family:var(--h2-subfont); display:block; margin-top:10px; font-size:var(--h2-subsize);}
.howtoorder .item_container{display:flex; width:100%; gap:40px;}
.howtoorder .item_container .item{width:50%; background:#fff; border-radius:10px; padding:80px;}
.howtoorder .item_container .item h3{display:block; width:fit-content; border:2px solid #4B4B4B; padding:10px 40px; font-size:clamp(14px,1vw,18px); margin:0 auto 70px auto; font-weight:500;}
.howtoorder .item_container .item dl{margin:0 0 30px 0; padding:0 0 30px 0; border-bottom:1px solid #4B4B4B;}
.howtoorder .item_container .item dl:nth-of-type(1){padding:30px 0; border-top:1px solid #4B4B4B;}
.howtoorder .item_container .item dt{font-family: "Outfit", "Noto Sans JP"; font-size:clamp(13px,0.88vw,16px); padding-left:10px; background-size:12px; display:flex; justify-content:space-between; align-items:center;}
.howtoorder .item_container .item dt:after{content:""; display:block; width:12px; height:5px; background:url(img/arrow_bottom.png) no-repeat; background-size:100%; transition:.3s; margin-right:10px;}
.howtoorder .item_container .item dt.active:after{transform: rotate(180deg);}
.howtoorder .item_container .item dt:hover{cursor:pointer;}
.howtoorder .item_container .item dd{margin:0; font-size:clamp(12px,0.78vw,14px); padding-left:36px; display:none; margin-top:10px;}
.howtoorder .item_container .item dd a{font-family: "mspgothic"; color:inherit;}
.howtoorder ul{list-style-type:none; padding:30px 0 0 0; margin:0; border-top:1px solid #4B4B4B;}
.howtoorder ul li{font-family: "Outfit", "Noto Sans JP"; padding:0 10px 30px 10px; margin:0 0 30px 0; border-bottom:1px solid #4B4B4B; font-size:clamp(13px,0.88vw,16px);}
.howtoorder .button_area{display:flex; justify-content:center; align-items:center; flex-direction:column; margin:70px 0 0 0;}
.howtoorder .button_area a{display:block; width:45%; text-align:center; text-decoration:none; padding:13px 0; border-radius:300px; font-size:16px;}
.howtoorder .button_area a.onlineshop{font-family: "Outfit"; background:#4B4B4B; color:#fff; border:1px solid #4b4b4b; transition:.5s;}
.howtoorder .button_area a.onlineshop:hover{background:#fff; color:#4b4b4b;}
.howtoorder .button_area a.tel{font-family:var(--font-yugothic); background:#fff; color:#4B4B4B; border:1px solid #4B4B4B; box-sizing:border-box; margin-bottom:30px; transition:.5s;}
.howtoorder .button_area a.tel:hover{background:#4b4b4b; color:#fff;}
.howtoorder .button_area a.line{font-family:var(--font-yugothic); background:#10C555; color:#fff; transition:.5s; border:1px solid #10C555;}
.howtoorder .button_area a.line:hover{background:#fff; color:#10C555;}
@media screen and (max-width:1050px) {
	.howtoorder .item_container{flex-direction:column;}
	.howtoorder .item_container .item{width:100%; box-sizing:border-box;}
}
@media screen and (max-width:580px) {
	.howtoorder{padding:14.5% 0;}
	.howtoorder .inner h2{margin-bottom:8%;}
	.howtoorder .item_container{gap:20px;}
	.howtoorder .item_container .item h3{margin:0 auto 40px auto;}
	.howtoorder .item_container .item{padding:40px;}
	.howtoorder .button_area{margin-top:40px;}
	.howtoorder .button_area a{width:65%; padding:20px 0;}
}

/*Other flowers*/
.other{padding:14.5% 0 12%; background:#fff;}
.other .inner{padding:0 5.2%; position:relative;}
.other .inner .flex{display:block;}
.other .inner h2{font-family:"mspgothic"; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; height:fit-content; border-left:1px solid #4B4B4B; padding-left:20px; font-size:30px; font-weight:600; float:left;}
.other .inner h2 span{font-size:14px; font-weight:400; margin-top:20px; position:relative; right:5px;}
.other .inner .other_item_container{display:flex; justify-content:right;}
.other .inner .other_item{width:90%; display:flex; justify-content:space-between;}
.other .inner .other_item .item{width:30%; display:flex; flex-direction:column;}
.other .inner .other_item .item .other_image{margin-bottom:20px; width:100%;}
.other .inner .other_item .item .other_image img{width:100%;}
.other .inner .other_item .item h3{font-family:var(--minion-font); font-weight:600; font-size:clamp(20px,1.6vw,34px); margin-bottom:20px;}
.other .inner .other_item .item h3 span{display:block; margin-top:2px; font-size:clamp(12px,0.88vw,16px)}
.other .inner .other_item .item .overview_text p{font-size: clamp(12px,0.78vw,14px); line-height:1.8; margin:0; padding:0;}
.other .inner .button_area{display:flex; justify-content:center; align-items:center; flex-direction:column; margin:100px 0 0 0;}
.other .inner .button_area a{display:block; width:fit-content; text-align:center; text-decoration:none; padding:15px 80px; border-radius:300px; font-size:16px;}
.other .inner .button_area a.onlineshop{background:url(img/onlineshop_arrow_right.png) no-repeat center right 20px #4B4B4B; background-size:5px; border:1px solid #4B4B4B; color:#fff; transition:.5s;}
.other .inner .button_area a.onlineshop:hover{background:url(img/onlineshop_arrow_right_dark.png) no-repeat center right 20px #fff; background-size:5px; color:#4B4B4B;}
	.other .inner .other_item .item .other_image .swiper-pagination{position:static;}
	.other .inner .other_item .item .other_image .swiper{height:auto !important; margin-bottom:10px;}
@media screen and (max-width:1050px) {
	.other .inner .flex{flex-direction:column;}
	.other .inner h2{writing-mode: horizontal-tb; height: fit-content; border-left: none; padding-left: 0; font-size: var(--h2-size); font-weight: 600; text-align:center; margin-bottom:70px; float:none;}
	.other .inner h2 span{display:block; margin-top:10px;}
	.other .inner .other_item{width:100%;}
}
@media screen and (max-width:680px) {
	.other .inner .other_item .item{width:100%; margin-bottom:40px;}
	.other .inner .other_item{flex-direction:column;}
	.other .inner .other_item .item .other_image .swiper-wrapper{height:auto !important;}
}
@media screen and (max-width:580px) {
	.other{padding:14.5% 0;}
	.other .inner h2{margin-bottom:8%;}
	.other .inner .other_item .item h3 span{margin-top:8px;}
	.other .inner .button_area{margin:0;}
	.other .inner .button_area a{padding:15px 50px}
}

/*Contact form*/
.contactform{padding:14.5% 0 12%; background:#FCFAF4;}
.contactform .inner{padding:0 5.2%; position:relative;}
.contactform .inner h2{font-family:var(--h2-font); text-align:center; margin-bottom:70px; font-size:var(--h2-size); font-weight:var(--h2-weight);}
.contactform .inner h2 span{display:block; margin-top:10px; font-size:var(--h2-subsize);}
.contactform .inner .form_container{width:74%; margin:0 auto;}
.contactform .inner .form_container dl{display:flex; align-items:center; margin:30px 0}
.contactform .inner .form_container dl dt{width:26%; font-size:14px;}
.contactform .inner .form_container dl dt span.required{font-size:12px; color:#F14B4B;}
.contactform .inner .form_container dl dd{width:70%;}
.contactform .inner .form_container dl dd .form_privacy_policy{background:#fff; padding:20px;}
.contactform .inner .form_container dl dd .form_privacy_policy p:last-child{margin:0;}
.contactform .inner .form_container dl dd p.text_area{font-size: clamp(12px,0.78vw,14px); margin:0 0 20px 0; padding:0; line-height:170%;}
.contactform .inner .form_container dl dd p.b{font-weight:600;}
.contactform .inner .form_container dl dd p.text_area a.line{color:#10C555;}
.contactform .inner .form_container dl dd p.annotation{font-size:clamp(10px,0.68vw,12px); margin:0 0 0 0; padding:0;}
.contactform .inner .form_container dl dd p.annotation .required{color:#F14B4B;}
.contactform .inner .form_container dl dd input[type="text"],.contactform .inner .form_container dl dd input[type="email"]{width:100%; box-sizing:border-box; font-size:16px; padding:10px; border:1px solid #969696;}
.contactform .inner .form_container dl dd textarea{width:100%; box-sizing:border-box; font-size:16px; padding:10px; border:1px solid #969696;}
.contactform .inner .form_container .send_button_area{display:flex; justify-content:center;}
.contactform .inner .form_container .send_button_area input[type="submit"]{transition:.5s; background:#4b4b4b; border:1px solid #4b4b4b; color:#fff; padding:12px 30px 10px 40px; font-size:14px; letter-spacing:10px;}
.contactform .inner .form_container .send_button_area input[type="submit"]:hover{background:#fff; color:#4b4b4b;}
@media screen and (max-width:1050px) {
	.contactform .inner .form_container{width:100%;}
}
@media screen and (max-width:580px) {
	.contactform .inner h2{margin-bottom:8%;}
	.contactform .inner .form_container dl{flex-direction:column; margin:20px 0;}
	.contactform .inner .form_container dl dt{width:100%; margin-bottom:15px;}
	.contactform .inner .form_container dl dt br{display:none;}
	.contactform .inner .form_container dl dd{width:100%; margin:0;}
	.contactform .inner .form_container dl dd p.annotation{text-align:right; position:relative; top:39px;}
}

/*ロゴ、見出し、テキストレイアウト、リセット*/
img{margin:0; padding:0; vertical-align:bottom;}
h1,h2,h3,h4,h5,h6{margin:0;}
#site-logo a{display:block; transition:1s;}
#site-logo a img{width:110px; margin:auto 0; transition:.5s;}
#site-logo.open a{transition:.5s;}
#site-logo.open a{display:block; background:url(img/logo_white.png) no-repeat; background-size:100%;}
#site-logo.open a img{opacity:0;}
.online_shop a{display:block; width:fit-content; padding:10px 40px 10px 30px; background:url(img/onlineshop_arrow_right.png) no-repeat center right 20px #4B4B4B; background-size:5px; color:#fff; font-size:14px; border-radius:100px; text-decoration:none; border:1px solid #4B4B4B; transition:.5s;}
.online_shop a:hover{background:url(img/onlineshop_arrow_right_dark.png) no-repeat center right 20px #fff; background-size:5px; color:#4b4b4b;}

/*固定ページ*/
main .content{padding:10% 0 10% 0;}
main .content .inner{margin:0 auto 8% auto;  padding:0 14.4%;}
main .content .inner .wrapper{background:#fff; padding:6%; margin:0 -6%; border-radius:20px;}
main .content .inner .wrapper .wrapper_inner p{margin:0 0 20px 0; font-size:clamp(13px,0.88vw,16px)}
main .content h2{font-family:var(--h2-font2); text-align:center; margin-bottom:70px; font-size:var(--h2-size); font-weight:var(--h2-weight);}
main .content h2 span{display:block; margin-top:10px; font-size:var(--h2-subsize);}
main .content p.message{font-size:clamp(14px,0.98vw,20px); line-height: 220%;}
main .content .wrapper h3{width:fit-content; border-bottom:1px solid #4B4B4B !important; font-size:clamp(16px, 1vw, 22px) !important; margin-bottom:20px !important; padding:0 !important;}
main .content .wrapper h4{border:none !important;}
main .content .annotation{color:#FC5647;}
main .content .thumbnail{margin-bottom:80px; height:500px;}
main .content .thumbnail img{width:100%; height:100%; object-fit:cover;}
@media screen and (max-width:960px) {
	main .content .inner{padding:0 5.2%; margin:0 auto 15% auto;}
}
@media screen and (max-width:580px) {
	main .content h2{margin-bottom:8%;}
	main .content .thumbnail{padding:0;}
	main .content p.message br{display:none;}
	main .content .annotation .indent2line{display:inline-block; text-indent: -1em; padding-left: 1em;}
}

main .content .inner .flex{display:flex; justify-content:space-between;}
main .content .inner .flex_reverse{display:flex; justify-content:space-between; flex-direction:row-reverse;}
main .content .inner .flex_image{width:60%;}
main .content .inner .flex_image .flex_image_flex{display:flex; justify-content:space-between;}
main .content .inner .flex_image .flex_image_flex img{width:48%;}
main .content .inner .flex_image img{width:100%; margin-bottom:20px;}
main .content .inner .flex_article{width:35%; padding:0;}
main .content .inner .flex_article.p2{padding:6% 0 0 0;}
main .content .inner .wrapper .flex_article{padding:0;}
main .content .inner .wrapper .flex_image{margin:4% 0 0 0;}
main .content .inner .wrapper .wrapper_inner{margin-bottom:80px;}
main .content .inner .flex_article h3{font-size:clamp(15px,1.1vw,22px); font-weight:500; border-bottom:1px solid #4b4b4b; padding:0 0 25px 0;  margin:0px 0 25px 0;}
main .content .inner .flex_article h4{font-size:clamp(12px,0.82vw,14px); font-weight:500; width:fit-content; border-bottom:1px solid #4b4b4b; margin-bottom:10px;}
main .content .inner .flex_article ul{margin:0 0 10px 0; padding:0 0 0 20px;}
main .content .inner .flex_article ul li{font-size:clamp(12px,0.8vw,14px); line-height:180%;}
main .content .inner .flex_article ul li.no-bullet{list-style-type:none; margin-left:-20px;}
main .content .inner .flex_article table{margin:0 0 40px 0; font-size:clamp(13px,0.82vw,15px);}
main .content .inner .flex_article table th{text-align:left; font-weight:normal; white-space: nowrap; padding-right:25px;}
main .content .inner .flex_article table td{padding:5px 0;}
main .content .inner .flex_article table td a{color:inherit;}
main .content .inner .flex_article .button_area{margin:0 0 40px 0;}
main .content .inner .flex_article .button_area a{display:block; width:fit-content; text-align:center; text-decoration:none; padding:10px 40px; border-radius:300px; font-size:clamp(12px,0.9vw,14px);}
main .content .inner .flex_article .button_area a.googlemap{background:url(img/onlineshop_arrow_right.png) no-repeat center right 20px #4B4B4B; background-size:5px; color:#fff; border:1px solid #4B4B4B; transition:.5s;}
main .content .inner .flex_article .button_area a.googlemap:hover{background:url(img/onlineshop_arrow_right_dark.png) no-repeat center right 20px #fff; background-size:5px; color:#4b4b4b;}
main .content .inner .flex_article .detail{margin-bottom:20px;}
main .content .inner .flex_article .detail p{margin:0 0 10px 0; line-height:170%; font-size:clamp(12px,0.78vw,14px);}
main .content .inner .flex_article .detail p.d01{font-size:clamp(14px,0.88vw,16px);}
main .content .inner .flex_article .detail p.description{margin:0 0 30px 0;}
main .content .inner .flex_article .detail p .b{font-weight:500;}
main .content .inner .wrapper .flex_article .detail_inner:nth-of-type(2){margin-bottom:40px;}
@media screen and (max-width:780px) {
	main .content .inner .flex{flex-direction:column;}
	main .content .inner .wrapper{margin:0; padding:10% 6%;}
	main .content .inner .wrapper .wrapper_inner{margin-bottom:8%;}
	main .content .wrapper h3{margin:0 auto 20px auto !important;}
	main .content .inner .flex_reverse{flex-direction:column;}
	main .content .inner .flex_image{width:100%;}
	main .content .inner .flex_image .flex_image_flex.howtosend_figure{display:none;}
	main .content .inner .flex_article{width:100%;}
	main .content .inner .flex_article .detail p.spcenter{text-align:center;}
	main .content .inner .flex_article .button_area.spflexcenter{display:flex; justify-content:center;}
}

main .content .qa_wrapper{background:#EFEFEA; padding: 10% 0 7% 0;}
main .content .qa_wrapper .inner:nth-of-type(1){margin:0 auto 3% auto;}
main .content .qa_wrapper .qa_container{display:flex; justify-content:space-between;}
main .content .qa_wrapper .qa_container h3{font-size:clamp(15px,1.1vw,18px);}
main .content .qa_wrapper .qa_container .qa_detail{width:70%;}
main .content .qa_wrapper .qa_container .qa_detail dl{border-bottom:1px solid #4B4B4B; margin:0;}
main .content .qa_wrapper .qa_container .qa_detail dl:nth-of-type(1){border-top:1px solid #4B4B4B;}
main .content .qa_wrapper .qa_container .qa_detail dl dt{display:flex; padding:20px 5px; position:relative; font-size: clamp(14px,0.98vw,16px);}
main .content .qa_wrapper .qa_container .qa_detail dl dt:hover{cursor:pointer;}
main .content .qa_wrapper .qa_container .qa_detail dl dt:before{content:"Q"; line-height:160%; font-family:var(--h2-font2); margin-right:20px; font-weight:700;}
main .content .qa_wrapper .qa_container .qa_detail dl dt:after{content:"＋"; position:absolute; right:5px; }
main .content .qa_wrapper .qa_container .qa_detail dl dt.active:after{content:"−";}
main .content .qa_wrapper .qa_container .qa_detail dl dd{margin:0; padding:20px 5px; border-top:1px solid #CBCBCB; display:flex; line-height:180%; font-size:clamp(13px,0.88vw,15px); display:none;}
main .content .qa_wrapper .qa_container .qa_detail dl dd .faq_a:before{content:"A"; line-height:160%; font-family:var(--h2-font2); color:#FC5647; margin-right:20px; font-weight:700; font-size:clamp(14px,0.98vw,16px);}
main .content .qa_wrapper .qa_container .qa_detail dl dd .faq_a{display:flex;}
@media screen and (max-width:780px) {
	main .content .qa_wrapper .qa_container{flex-direction:column;}
	main .content .qa_wrapper .qa_container .qa_detail{width:100%;}
	main .content .qa_wrapper .qa_container h3 br{display:none;}
	main .content .qa_wrapper .qa_container h3{margin:0 0 20px 0;}
}
@media screen and (max-width:580px) {
	main .content .qa_wrapper .qa_container .qa_detail dl dt:before{margin-right:10px;}
	main .content .qa_wrapper .qa_container .qa_detail dl dd .faq_a:before{margin-right:10px;}
	main .content .qa_wrapper .qa_container .qa_detail dl dt{padding:20px 30px 20px 5px;}
	main .content .qa_wrapper .qa_container .qa_detail dl dd{padding:20px 30px 20px 5px;}
	main .content .qa_wrapper .inner:nth-of-type(1){margin:0 auto 12% auto;}
}

/*フッター*/
footer{text-align:center; padding:80px 0 40px 0; background:#462E06; position:relative; display:flex; flex-direction:column; align-items:center;}
footer .pagetop{position:absolute; width:26px; top:20px; right:20px;}
footer .pagetop img{width:100%;}
footer .footer_logo{width:135px; margin-bottom:40px;}
footer .footer_logo img{width:100%;}
footer #copyright{padding:0; text-align:center;}
footer #copyright p{font-family:var(--h2-font); font-size:12px; padding:0; margin:0 auto; color:#fff; font-weight:300;}
footer .footer_sns_nav{position:absolute; bottom:40px; right:10px;}
footer .footer_sns_nav ul{list-style-type:none; padding:0; margin:0; display:flex; width:fit-content;}
footer .footer_sns_nav ul li{display:block; width:23px; margin:0 10px;}
footer .footer_sns_nav ul li a{display:block;}
footer .footer_sns_nav ul li a img{width:100%;}
@media screen and (max-width:620px) {
	footer{padding:8% 0 0 0}
	footer .pagetop{position:static; width:51px; height:23px; background:url(img/pagetop_sp.png) no-repeat; background-size:100%; margin:0 0 10% 0;}
	footer .pagetop img{opacity:0;}
	footer .footer_logo{margin-bottom:4%;}
	footer .footer_sns_nav{position:static; margin:0 0 8% 0;}
	footer #copyright{display: block; background: #fff; width: 100%; padding: 4% 0;}
	footer #copyright p{color:#462e06;}
}

.pcno{display:none;}
.spno{display:block;}
.w100p{width:100%;}
img.pcno.w100p{margin-bottom:20px;}

@media screen and (max-width:640px){
	body,body.custom-background{font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;}
	#container{width:100%; box-sizing:border-box; padding:0 20px;}
	#site-header-inner{width:100%;}
	#banner img{width:100%;}
	#banner .catchphrase img {width: 100% !important;}
	#main{width:100%; float:none;}

	nav{margin:20px 0 0 0; width:100%; overflow:auto; display:none;}
	nav ul{width:100%;}
	nav ul li{float:none; display:block; border-bottom:1px solid #ddd; background:url(img/spnavibg2.png) no-repeat right center; background-size:15px;}
	nav ul li:last-child{border:none;}
	
	.pcno{display:block;}
	.spno{display:none;}
}

.foogallery.fg-dark.fg-shadow-medium .fg-item-inner, .foogallery.fg-light.fg-shadow-medium .fg-item-inner {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0)!important;
}
@media screen and (min-width:950px){
#foogallery-gallery-262 {
	padding: 0 14.4%;
}
}
@media screen and (min-width:600px){
.foogallery.fg-loaded-fade-in .fg-item.fg-loaded {
	width:30%;
}
}
@media screen and (max-width:599px){
.foogallery.fg-loaded-fade-in .fg-item.fg-loaded {
	width:45%;
}
.fg-default {
	padding:0 15px;
}
}
.header_cta .instagram img {
	width:30px;
	margin-top: 7px;
}