@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
@font-face{font-family:"font_j";src:url("/wp-content/uploads/font/font_j.woff") format("woff"),url("/wp-content/uploads/font/font_j.woff2") format("woff2");}
@font-face{font-family:"font_e";src:url("/wp-content/uploads/font/font_e.woff") format("woff"),url("/wp-content/uploads/font/font_e.woff2") format("woff2");}

:root{
	--MAINCOLOR:rgb(106,207,188);
	--MAINCOLORT:rgba(106,207,188,0.7);
	--SUBCOLOR:rgb(200,144,161);
	--SUBCOLORT:rgba(200,144,161,0.7);
	--WHITE:rgb(253,253,253);
	--BG1:rgb(250,250,250);
	--FONT:rgb(21,12,21);
}

.small{font-size:75%!important;}
.smaller{font-size:85%!important;}
.big{font-size:125%!important;}
.bigger{font-size:110%!important;}
.red{color:rgb(255,0,70);}
.white{color:rgb(255,255,255);}
.blue{color:rgb(102,153,255);}
.royalblue{color:rgb(65,105,225);}
.black{color:rgb(21,12,21);}
.green{color:rgb(50,205,50);}
.dgreen{color:rgb(0,100,0);}
.yellow{color:rgb(255,255,224);}
.pink{color:rgb(242,98,132);}
.apricot{color:rgb(247,185,119);}
.mintgreen{color:rgb(120,204,198);}
.maincolor{color:var(--MAINCOLOR)!important;}
.subcolor{color:var(--SUBCOLOR)!important;}
.fontcolor{color:var(--FONT)!important;}
.noborder{border:0!important;border-radius:0!important;box-shadow:none!important;}
.pointer{cursor:pointer!important;}
.lefts{text-align:left!important;}
.centers{text-align:center!important;}
.rights{text-align:right!important;}
.br05{border-radius:0.5rem!important;}
.mb01{margin-bottom:0.1rem!important;}
.mb02{margin-bottom:0.2rem!important;}
.mb03{margin-bottom:0.3rem!important;}
.mb05{margin-bottom:0.5rem!important;}
.mb1{margin-bottom:1rem!important;}
.mb2{margin-bottom:2rem!important;}
.mt02{margin-top:0.2rem!important;}
.mt05{margin-top:0.5rem!important;}
.mt1{margin-top:1rem!important;}
.mr1{margin-right:1rem!important;}
.ml1{margin-left:1rem!important;}
.mt-2{margin-top:-2rem!important;}
.m0{margin:0!important;}
.mt0{margin-top:0!important;}
.mr0{margin-right:0!important;}
.mb0{margin-bottom:0!important;}
.ml0{margin-left:0!important;}
.all0{margin:0!important;padding:0!important;}
.nodisp{display:none!important;}
.upside{margin-top:-2.5rem!important;}

.content{background:transparent!important;padding:0!important;}
.content.pc{margin-top:-0.5rem!important;}
.content.sp{margin-top:-0.5rem!important;}
.footer-in.pc{width:auto;}
.footer-in.sp{width:100vw;margin-left: calc(-50vw + 50%);}
.error404 .entry-title{text-align:center;}

html{color:var(-FONT);}
body{font-family:"font_j";}
h1,h2,h3{position:relative;border:0!important;;background:transparent!important;padding:0!important;font-weight:700!important;}
.heading{padding:0.25rem 0.5rem 0.25rem 0.5rem!important;margin-bottom:1.5rem;border-bottom:0.15rem solid var(--MAINCOLOR)!important;color:rgb(120,120,120)!important;}
.heading:before{content:attr(data-en);font-family:"font_e";font-size:0.7rem!important;font-weight:700!important;display:block;margin-bottom:0.15rem;margin-left:-0.5rem;padding:0!important;color:rgb(90,90,90)!important;}
.heading:after{content:"";position:absolute;right:0;bottom:-0.15rem;width:50%;height:0.15rem;background:var(--SUBCOLOR);}
.texts{position:relative;text-align:left;padding:0 0.5rem 0 0.5rem!important;margin-bottom:1.5rem;}
.mainheading{margin-bottom:1rem;padding:0.2rem!important;border-left:1rem solid var(--MAINCOLOR)!important;color:var(--MAINCOLOR);background:var(--BG1)!important;font-weight:300!important;}
.subheading{margin-bottom:1rem;padding:0.2rem!important;border-left:1rem solid var(--SUBCOLOR)!important;color:var(--SUBCOLOR);background:var(--BG1)!important;font-weight:300!important;}

div.imageblock{margin-bottom:1em;text-align:center;}
div.imageblock div{display:inline-block;}
div.imageblock div img{width:100%;height:auto;}
div.imageblock.pc div.one{width:70%;}
div.imageblock.pc div.one.narrow{width:30%;}
div.imageblock.sp div.one{width:90%;}
div.imageblock div.one.full{width:100%;}

div.pagebutton{position:relative;margin:0 auto;text-align:center!important;padding:0.3em;border:0.1em solid var(--SUBCOLOR);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;color:var(--SUBCOLOR);}
div.pagebutton.pc{width:20em;}
div.pagebutton.sp{width:15em;}
div.pagebutton:before{content:"";position:absolute;top:0;left:0;width:0.5em ;height:100%;-webkit-transition:all .3s;transition:all .3s;-webkit-transform:translateX(0) translateY(0);transform: translateX(0) translateY(0);border-radius:0 50% 50% 0;background:var(--SUBCOLOR);}
div.pagebutton:hover:before{font-family:'Font Awesome 5 Free';font-weight:bold;line-height:1.2em;width:1.2em;height:1.2em;content:'\f061';color:var(--WHITE);border-radius:50%;}
div.pagebutton.pc:hover:before{-webkit-transform:translateX(19em) translateY(.5rem);transform:translateX(19em) translateY(.5rem);}
div.pagebutton.sp:hover:before{-webkit-transform:translateX(14em) translateY(.5rem);transform:translateX(14em) translateY(.5rem);}
div.pagebutton:hover{border-radius:1em;transition:0.5s;background:var(--MAINCOLORT);color:var(--WHITE);border:0.1em solid var(--MAINCOLORT);cursor:pointer;}

ul.point{margin-right:0;margin-left:0;}
ul.point li{list-style:none;}
ul.point li:before{font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;left:0.5rem;color:inherit;}
ul.point li:before{content:"\f0a4";}
ul.point li div{padding:0;line-height:1.05rem;}

ul.nums{margin-right:0;margin-left:0;}
ul.nums li{padding:0;margin-bottom:1rem;list-style:decimal;}

div.rowset{margin-bottom:1rem;}
div.rowset div.title{margin-bottom:1rem;}
div.rowset div.title span{border-bottom:0.15rem solid var(--MAINCOLOR);color:var(--MAINCOLOR);}
div.rowset div.content{padding:0 0.5rem 0 0.5rem!important;}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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