@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/

.mobile-header-menu-buttons {background:transparent;box-shadow:none;z-index:999;}
.navi-menu-icon {background:rgba(255,255,255,0.5);margin-left:5px;padding:5px;}
.mobile-header-menu-buttons .logo-menu-button a,
.mobile-header-menu-buttons .search-menu-button,
.mobile-header-menu-buttons .navi-menu-caption {display:none;}

.home .fixed-header {display:none;}
.home .fixed-header .logo {display:none;}
.home .article-header {display:none;}

.logo.logo-header {display:none;}

.header-container {background:transparent;box-shadow:none;padding:30px 0;}
.navi {background:transparent;color:#fff;}
.navi li a {color:#fff;border-right:1px solid #fff;font-size:14px;}
.navi li:last-child a {border-right:none;}
.navi li a:hover {background:rgba(255,255,255,0.7);}

.main {background:transparent;}

body {font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;}


/* HOME */

.home .container {background-repeat:no-repeat;
background-position:center;
background-image:url(https://trefleflower.com/wp-content/uploads/home.jpg);
background-size:cover;
}
.sns-wrap {display:flex;justify-content:flex-end}
.sns-wrap img {margin:0 10px;width:24px;height:24px;padding:0;}


/* lessonページ */

.page-id-15 .container {
background:url(https://trefleflower.com/wp-content/uploads/lessonbg01.jpg) no-repeat;
background-size:contain;
}
.page-id-15 .entry-header {background:rgba(156,149,139,0.8);padding:1vw 0 0.7vh;margin: 0 calc(50% - 50vw);text-align:center;position:relative;}
.page-id-15 .entry-header h1.entry-title {color:#53300a;font-size:40px;font-weight:200;z-index:9999;}
.page-id-15 .entry-header h1.entry-title:after {
content:'花をたのしむ暮らし レッスンのご案内\Aworkshop／online／atelier';
white-space: pre; color:#fff;z-index:9999;
font-size:16px;font-family: "Noto Sans JP", sans-serif;
line-height:150%;margin:5px;display:block;clear:both;
}
.page-id-15 .entry-header:before {
content:'';
background:url(https://trefleflower.com/wp-content/uploads/lessonheader01.png) no-repeat;
background-size:contain;
background-position:center;
width:100%;
height:100%;
display:block;
position:absolute;
top:0;
mix-blend-mode: multiply;}
.page-id-15 .entry-header02:before {
content:'';
background:url(https://trefleflower.com/wp-content/uploads/lessonheader02.png) no-repeat;
background-size:contain;
background-position:center;
width:100%;
height:100%;
display:block;
position:absolute;
top:0;
mix-blend-mode: multiply;}
.page-id-15 .entry-content {margin:0;color:#604d3f;}
.page-id-15 .entry-content p {color:#604d3f;font-weight:400;}
.page-id-15 .section01 {margin: 0 calc(50% - 50vw);
background:url(https://trefleflower.com/wp-content/uploads/lessonbg01.jpg) no-repeat;
background-position:center;
background-size:cover;}
.page-id-15 .section02 {margin: 0 calc(50% - 50vw); 
background:url(https://trefleflower.com/wp-content/uploads/lessonbg02.jpg) no-repeat;
background-position:center;
background-size:cover;}
.page-id-15 .section01 .sectionwrap {background:rgba(255,255,255,0.75);padding:5vw;margin:0;}
.page-id-15 .section02 .sectionwrap {background:rgba(255,255,255,0.88);padding:5vw;margin:0;}
.page-id-15 section .sectionwrap {overflow:auto;}

.page-id-15 .section01 h3 {
  position: relative;
  display: inline-block;
  padding-left: 20px;
}
.page-id-15 .section01 h3:before {
content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 8px;
  border-color: transparent transparent transparent #333;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

.page-id-15 .entry-header02 {background:rgba(178,159,126,0.85);padding:1vw 0 0.7vh;margin: 0 calc(50% - 50vw);text-align:center;position:relative;}
.page-id-15 .entry-header02 h1.entry-title {color:#53300a;font-size:40px;font-weight:200;}
.page-id-15 .entry-header02 h1.entry-title:after {
content:'花を贈る、花を飾る オーダーメイド受付\A bouquet／arrangement／wedding';
white-space: pre; color:#fff;
font-size:16px;font-family: "Noto Sans JP", sans-serif;
line-height:150%;margin:5px;display:block;clear:both;
}
.page-id-15 .section03 {margin: 0 calc(50% - 50vw);
background:url(https://trefleflower.com/wp-content/uploads/lessonbg03.jpg) no-repeat;
background-position:center;
background-size:cover;}
.page-id-15 .section03 .sectionwrap {background:rgba(201,202,202,0.85);padding:5vw;margin: 0;}

p.border {border-left:1px solid;padding-left:1em;}


/* Aboutページ */

.page-id-18 .container {
background:url(https://trefleflower.com/wp-content/uploads/aboutbg.jpg) no-repeat;
background-position:center;
background-size:cover;
}
.page-id-18 .entry-header {background:rgba(173,183,165,0.7);padding:1vw 0 0.7vh;margin:0;text-align:center;position:relative;}
.page-id-18 .entry-header:before {
content:'';
background:url(https://trefleflower.com/wp-content/uploads/aboutheader.png) no-repeat;
background-size:contain;
width:100%;
height:100%;
display:block;
position:absolute;
top:0;
mix-blend-mode: multiply;}
.page-id-18 .entry-header h1.entry-title {color:#53300a;font-size:40px;font-weight:200;}
.page-id-18 .entry-header h1.entry-title:after {
content:'トレフルについて\Amessage／profile';
white-space: pre; color:#fff;
font-size:16px;font-family: "Noto Sans JP", sans-serif;
line-height:150%;margin:5px;display:block;clear:both;
}

.page-id-18 .entry-content {background:rgba(156,149,139,0.5);padding:10%;margin:0;}
.page-id-18 .entry-content p,
.page-id-18 .entry-content h3 {color:#fff;}

/* Orderページ */

body.page-id-9 {background:#fafaf3;}
.page-id-9 .header-container {background:#9ba552;padding-bottom:200px;}
.page-id-9 .entry-header {background:#d9cab0;padding:1vw 0 0.7vh;margin:-205px auto 0;text-align:center;position:relative;}
.page-id-9 .entry-header:before {
content:'';
background:url(https://trefleflower.com/wp-content/uploads/orderheader.png) no-repeat;
background-size:cover;
width:100%;
height:100%;
display:block;
position:absolute;
top:0;
mix-blend-mode: multiply;}
.page-id-9 .entry-header h1.entry-title {color:#53300a;font-size:40px;font-weight:200;}
.page-id-9 .entry-header h1.entry-title:after {
content:'ご注文メール\Amail';
white-space: pre; color:#fff;
font-size:16px;font-family: "Noto Sans JP", sans-serif;
line-height:130%;margin:5px;display:block;clear:both;
}
.page-id-9 .entry-content {background:#ece7d9;padding:5% 8%;margin:0;}


.footer-wrap {background:#697b68;margin:0;padding:5px 5%;z-index:998;position:relative;}
.footer-wrap .footer-wrap-cont {width:1200px;max-width:98%;margin:15px auto 0;display:flex;font-family: "Noto Sans JP", sans-serif;}
.footer-wrap .footer-wrap-cont {font-size:12px;color:#c9a063;}
.footer-col01 {width:35%;}
.footer-col01 img {max-width:300px;margin:0 auto;display:block;}
.footer-col02 {margin:30px 2% 40px;}
.footer-menu {font-size:14px;margin-top:20px;}
.footer-menu a {color:#fff;text-decoration:none;border-right:1px solid #fff;margin-right:0.8em;padding-right:0.8em;}
.footer-menu a:last-child {border-right:none;}

.page .date-tags {display:none;}

.left {width:50%;float:left;}
.right {width:50%;float:right;}

.container {position:relative;}
.entry-content img {margin:40px auto;display:block;}

.entry-content .cont {width:880px;max-width:100%;margin:0 auto;}
.entry-content p {font-family: "Noto Sans JP", sans-serif;font-size: 14px;line-height: 26px;letter-spacing:1px;font-weight:200;font-style: normal;text-transform: none;color: #777;}
.entry-content h2 {background:transparent;padding:0;line-height:170%;}
.entry-content h3 {font-size:18px;line-height:180%;font-weight:200;border:none;padding:0;}

a {transition:0.5s;}
a:hover {opacity:0.8;transition:0.5s;}
.small {font-size:80%;}
.grecaptcha-badge { visibility: hidden; }
.no-pc {display:none;}
.no-sp {display:block;}

body {
  animation: fadein 3s forwards;
}

@keyframes fadein {
  0% {opacity: 0}
  100% {opacity: 1}
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
.footer-wrap {padding:5px 2%;}
.footer-wrap .footer-wrap-cont {display:block;}
.footer-col {margin:0px auto 20px;}
.footer-col01 {width:100%;}
.footer-col01 img {width:65%;margin:20px auto;}
.footer-col02 {margin:30px 0 40px;}
}

/*834px以下*/
@media screen and (max-width: 834px){
.home .container {background-image:none;}
.home .container::before {
content:"";
display:block;
position:fixed;
top:0;
left:0;
z-index:-1;
width:100%;
height:100vh;
background-repeat:no-repeat;
background-position:50% 100%;
background-image:url(https://trefleflower.com/wp-content/uploads/home.jpg);
background-size:cover;
}
.page-id-15 .entry-header {background:url(https://trefleflower.com/wp-content/uploads/lessonheader01sp.png) no-repeat;
background-size:cover;
background-position:center;
width:100vw;
height:100%;
display:block;}
.page-id-15 .entry-header h1.entry-title:after {font-size:15px;}
.page-id-15 .entry-header:before {
content:'';
background:url(https://trefleflower.com/wp-content/uploads/lessonheader01x.png) no-repeat;}
.page-id-15 .entry-header02 {background:url(https://trefleflower.com/wp-content/uploads/lessonheader02sp.png) no-repeat;
background-size:cover;
background-position:center;
width:100vw;
height:100%;
display:block;}
.page-id-15 .entry-header02 h1.entry-title:after {font-size:15px;}
.page-id-15 .entry-header02:before {
content:'';
background:url(https://trefleflower.com/wp-content/uploads/lessonheader02x.png) no-repeat;}
.page-id-9 .entry-header {background:url(https://trefleflower.com/wp-content/uploads/orderheadersp.png) no-repeat;
background-size:cover;
background-position:center;
width:100vw;
height:100%;
display:block;}
.page-id-9 .entry-header h1.entry-title:after {font-size:15px;}
.page-id-9 .entry-header:before {
content:'';
background:url(https://trefleflower.com/wp-content/uploads/orderheaderx.png) no-repeat;}
.page-id-18 .entry-header {background:url(https://trefleflower.com/wp-content/uploads/aboutheadersp.png) no-repeat;
background-size:cover;
background-position:center;
width:100%;
height:100%;
display:block;}
.page-id-18 .entry-header h1.entry-title:after {font-size:15px;}
.page-id-18 .entry-header:before {
content:'';
background:url(https://trefleflower.com/wp-content/uploads/aboutheaderx.png) no-repeat;}
.page-id-18 .container {background-image:none;}
.page-id-18 .container::before {
content:"";
display:block;
position:fixed;
top:0;
left:0;
z-index:-1;
width:100%;
height:100vh;
background-repeat:no-repeat;
background-position:50% 100%;
background-image:url(https://trefleflower.com/wp-content/uploads/aboutbg.jpg);
background-size:cover;
}
.page-id-15 .entry-header {padding:0.5vw 0;}
.page-id-15 .entry-header h1.entry-title {font-size:30px;margin:0;padding:10px;}
.page-id-15 .entry-header02 {padding:0.5vw 0;}
.page-id-15 .entry-header02 h1.entry-title {font-size:30px;margin:0;padding:10px;}
.page-id-18 .entry-header {padding:0.5vw 0;}
.page-id-18 .entry-header h1.entry-title {font-size:30px;margin:0;padding:10px;}
.page-id-9 .entry-header,
.page-id-9 .entry-content {margin-left: calc(50% - 50vw);margin-right: calc(50% - 50vw);}
.page-id-9 .entry-header {padding:0.5vw 0;}
.page-id-9 .entry-header h1.entry-title {font-size:30px;margin:0;padding:10px;}
.page-id-9 .entry-header:before {background-size:contain;}
.entry-content p {font-size:13px;}
.footer-menu {font-size:13px;}
.left,
.right {width:100%;float:none;}
.no-pc {display:block;}
.no-sp {display:none;}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}