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

/************************************
** 子テーマ用のスタイルを書く
************************************/
body{
	overflow-x:hidden;
}
/*header*/
#header-container{
	position: fixed;
    width: 100%;
    z-index: 5;
    background-color: #ffffffcf;
	top:0;
}
#header-container #navi{
	background-color: #ffffffcf;
}
div#content{
	padding-top: 120px;
}
header#header{
	border-top: 8px solid;
    border-image: linear-gradient(to right, #c4fbe2 5%, #fee1c6 5%,#fee1c6 14%,#c3e3fc 14%,#c3e3fc 23%,#fec7e1 23%,#fec7e1 32%,#e1f9c7 32%,#e1f9c7 41%,#f0c8fb 41%,#f0c8fb 50%,#c5fdfe 50%,#c5fdfe 59%,#fffcc9 59%,#fffcc9 68%,#c4fbe2 68%,#c4fbe2 77%,#fee1c6 77%,#fee1c6 86%,#c3e3fc 86%,#c3e3fc 95%,#fec7e1 95%,#fec7e1 100%);
    border-image-slice: 1;
}
.header .header-in{
	max-width: 1200px;
	display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: baseline;
    flex-direction: row;
	padding-top: 16px;
}
header #header-bt-area{
	display: flex;
}
header #header-bt-area a{
	text-decoration: none;
}
p#header-bt01 {
    width: 110px;
    height: 24px;
    font-size: 14px;
    margin: 0px;
    text-align: center;
    padding: 0px 10px;
    background-color: #ffa645;
    color: #ffffff;
    border-radius: 15px;
}
p#header-bt02 {
    width: 110px;
    height: 24px;
    font-size: 14px;
    margin: 0px;
    text-align: center;
    padding: 0px 10px;
    background-color: #ffa645;
    color: #ffffff;
    border-radius: 15px;
}
p#header-bt03 {
    width: 180px;
    height: 35px;
    font-size: 18px;
    margin: 0px;
    text-align: left;
    padding: 0px 10px;
    background: linear-gradient(90deg, #56ACE5 0, #1d8ad1 100%);
    color: #ffffff;
    border-radius: 8px;
    line-height: 35px;
    display: inline-flex;
}
header #header-bt-area {
    display: flex;
    width: 36%;
    max-width: 432px;
    justify-content: space-between;
    align-items: center;
    position: relative;
    left: 10%;
}
/*navi*/
ul#menu-main-menu li:nth-child(1) div.item-label{color:#56ACE5;}
ul#menu-main-menu li:nth-child(2) div.item-label{color:#FE6FB3;}
ul#menu-main-menu li:nth-child(3) div.item-label{color:#9DD643;}
ul#menu-main-menu li:nth-child(4) div.item-label{color:#B576FB;}
ul#menu-main-menu li:nth-child(5) div.item-label{color:#FD2D2A;}
ul#menu-main-menu li:nth-child(6) div.item-label{color:#52CC8F;}
ul#menu-main-menu li:nth-child(7) div.item-label{color:#FF8B0D;}

ul#menu-main-menu li:nth-child(1) a:hover{background-color:#56ACE5;color:#ffffff;}
ul#menu-main-menu li:nth-child(2) a:hover{background-color:#FE6FB3;color:#ffffff;}
ul#menu-main-menu li:nth-child(3) a:hover{background-color:#9DD643;color:#ffffff;}
ul#menu-main-menu li:nth-child(4) a:hover{background-color:#B576FB;color:#ffffff;}
ul#menu-main-menu li:nth-child(5) a:hover{background-color:#FD2D2A;color:#ffffff;}
ul#menu-main-menu li:nth-child(6) a:hover{background-color:#52CC8F;color:#ffffff;}
ul#menu-main-menu li:nth-child(7) a:hover{background-color:#FF8B0D;color:#ffffff;}

ul#menu-main-menu li:nth-child(1) a:hover div.item-label{color:#ffffff;}
ul#menu-main-menu li:nth-child(2) a:hover div.item-label{color:#ffffff;}
ul#menu-main-menu li:nth-child(3) a:hover div.item-label{color:#ffffff;}
ul#menu-main-menu li:nth-child(4) a:hover div.item-label{color:#ffffff;}
ul#menu-main-menu li:nth-child(5) a:hover div.item-label{color:#ffffff;}
ul#menu-main-menu li:nth-child(6) a:hover div.item-label{color:#ffffff;}
ul#menu-main-menu li:nth-child(7) a:hover div.item-label{color:#ffffff;}
/*main*/
main#main {
    padding-bottom: 0px;
}
footer#footer {
    margin-top: 0px;
}
/*contents*/
h1.elementor-heading-title.elementor-size-default {
    font-size: 2.5vw;
	font-family: "M PLUS Rounded 1c", Sans-serif;
}
.round_txt_g {
    background-color: #8AE3BB;
    width: 49px;
    height: 49px;
    display: inline-block;
    vertical-align: baseline;
    border-radius: 50%;
    color: #ffffff;
    line-height: 49px;
	margin: 0 0.1em;
	font-size: 2.5vw;
}
.round_txt_r{
	    background-color: #ED91BD;
    width: 49px;
    height: 49px;
    display: inline-block;
    vertical-align: baseline;
    border-radius: 50%;
    color: #ffffff;
    line-height: 49px;
	margin: 0 0.1em;
	font-size: 2.5vw;
}
.round_txt_b{
	    background-color: #90C7F2;
    width: 49px;
    height: 49px;
    display: inline-block;
    vertical-align: baseline;
    border-radius: 50%;
    color: #ffffff;
    line-height: 49px;
	margin: 0 0.1em;
	font-size: 2.5vw;
}
.round_txt_p{
	    background-color: #BB94E8;
    width: 49px;
    height: 49px;
    display: inline-block;
    vertical-align: baseline;
    border-radius: 50%;
    color: #ffffff;
    line-height: 49px;
	margin: 0 0.1em;
	font-size: 2.5vw;
}
.round_txt_o{
	    background-color: #EDBD90;
    width: 49px;
    height: 49px;
    display: inline-block;
    vertical-align: baseline;
    border-radius: 50%;
    color: #ffffff;
    line-height: 49px;
	margin: 0 0.1em;
	font-size: 2.5vw;
}
span.kakomi_p {
    color: #000000;
    border: solid #DB347A 3px;
    padding: 0.05em;
    display: inline-block;
	margin-right: 0.1em;
}
/*banner*/
.slider_banner_box {
    width: 35vw;
    height: 23vw;
    max-width: 600px;
    max-height: 400px;
    background-color: #ffffffa1;
    padding: 3px;
    box-sizing: border-box;
}
.slider_banner_box .slider_banner_box_border {
    padding: 2.9vw 4vw;
    border: solid 3px #eb347a;
    box-sizing: border-box;
	width: 34.5vw;
    height: 22.5vw;
    max-width: 590px;
    max-height: 385px;
}
.slider_banner_box .banner_title01 {
    color: #db347a;
    -webkit-text-stroke:1px #ffffff;
    text-stroke:1px #ffffff;
    font-size: 3.0vw;
    font-weight: bold;
    margin: 0px;
    text-align: center;
}
.slider_banner_box .banner_title02 {
    margin: 0px;
    color: #000000;
    font-size: 3.7vw;
    text-align: center;
}
.banner_title02 span {
    background-color: #ffffff;
    border: solid 0.3rem #eb639b;
    display: inline-block;
    padding: 0px 0.7rem;
    margin: 0 0.2rem;
}
.slider_banner_box .banner-op_area {
    display: flex;
    justify-content: flex-end;
    padding-right: 2vw;
}
.slider_banner_box .banner_op {
    margin: 1vw 0px;
    background-color: #db347a;
    border-radius: 1vw;
    padding: 0.4em 0.7em;
    line-height: 0.8vw;
    font-size: 0.8vw;
    color: #ffffff;
    margin-right: 1em;
}
.slider_banner_box p.second_p {
    font-size: 1.3vw;
    text-align: center;
    color: #db347a;
    font-weight: bold;
    margin: 0px;
    position: relative;
    top: -3vw;
    left: -1vw;
}
.slider_banner_box .round_pink {
    font-size: 1.3vw;
    background-color: #db347a;
    color: #ffffff;
    border-radius: 100%;
    display: inline-block;
    width: 4vw;
    height: 4vw;
    line-height: 4vw;
    vertical-align: bottom;
}
.slider_banner_box .round_pink:first-letter{
    font-size: 1.8vw;
}
/*footer*/
.footer-left{width:40%;}
.footer-center{
	width:40%;
	display: flex;
    justify-content: space-around;
    margin-top: 42px;
}
.footer-center aside {
    max-width: 230px;
}
.footer-right{width:20%;margin-top: 42px;}
div#footer-in {
    max-width: 1200px;
}
aside#text-4 p:first-child{
	font-size: 18px;
    margin-bottom: 0px;
}
aside#text-4 p{
	font-size: 12px;
}
#footer-contact-info p{
	font-size: 12px !important;
}
div#footer-contact-info {
    display:flex;
	justify-content:space-between;
}
div#footer-contact-info p{
    display:inline-block;
}
#footer-contact-info p span{
	background-color: #ffffff;
    color: #F0A037;
    margin-right: .6em;
    padding: 0 0.3em;
}
#footer-contact-info p i{
	margin-right: .6em;
}
ul#menu-footer_menu01,ul#menu-footer_menu02{
	list-style: disc;
    font-size: 14px;
}
ul#menu-footer_menu01 a,ul#menu-footer_menu02 a{
	padding-bottom: 0px;
}
ul#menu-footer_menu01 ul.sub-menu a{
	padding: 0px;
}
ul#menu-footer_menu01 ul.sub-menu a:before{
	content:">";
	margin-right:0.2em;
}
.footer-right a{
	text-decoration:none;
}
p#footer-bt01 {
    width: 140px;
    height: 25px;
    font-size: 16px;
    margin: 0px;
    text-align: left;
    padding: 0px 10px;
    background: linear-gradient(90deg, #56ACE5 0, #1d8ad1 100%);
    color: #ffffff;
    border-radius: 8px;
    line-height: 25px;
    display: inline-flex;
}
div#footer-bt-area{
	display: flex;
    flex-direction: column;
    align-items: center;
}
p#footer-bt02 {
    width: 140px;
    height: 24px;
    font-size: 14px;
    margin: 0px;
    text-align: center;
    padding: 0px 10px;
    background-color: #ffffff;
    color: #ffa645;
    border-radius: 15px;
}
/*contactform7*/
#contactus_box {
    width: 800px;
    max-width: 90%;
    padding: 1em 0.6em;
    background-color: #ffffff;
    margin: 0 auto;
}
#contactus_box .contact_row {
    display: flex;
    justify-content: flex-start;
    align-content: flex-start;
	margin-bottom: 30px;
}
#contactus_box .contact_contents {
    font-size: 14px;
    width: 100%;
    max-width: 13em;
    color: #6a4d56;
}
span.required{
    color: #bf0a0a;
}
#contactus_box .contact_input {
    font-size: 14px;
    display: flex;
    margin-right: 1rem;
	line-height: 3rem;
	color: #333333;
	flex-basis: 100%;
}
#contactus_box .contact_input span{
	font-size:18px;
	width: 100%;
}
#contactus_box .contact_input span input,#contactus_box .contact_input span textarea{
	background-color: #fffaf1;
}
span#sex {
    display: flex;
}
span#sex span {
    width: 5rem !important;
}
span#inquiry {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
span#inquiry span {
    display: contents;
}
span#inquiry span label {
    margin-right: 1rem;
}
#contactus_box .address .contact_input span {
    width: 70%;
}
div#contact-policy{
        width: 800px;
    max-width: 90%;
        max-height: 250px;
        padding: 15px;
        margin: 10px auto;
        border: solid 1px #d2d2d2;
        overflow-x: hidden;
        overflow-y: scroll;
    background-color: #ffffff;
    box-sizing: border-box;
    }
    div#contact-policy p{
        font-size: 12px
    }
    span#pp-check{
        text-align: center;
        display: block;
        margin: 15px auto;
    }
    @media screen and (max-width: 480px){
		#contactus_box .contact_row{
			flex-direction: column;
}
		span#sex{
			flex-direction: column;
		}
		#contactus_box .contact_input{
			flex-direction: column;
		}
		} 
.wpcf7-submit{
	    margin: 20px auto !important;
    display: block !important;
	font-size: 18px;
    max-width: 300px;
    background-color: #f5bfbb !important;
}
body.home div#afc_sidebar_609,body.page-id-231 div#afc_sidebar_609{
		display:none;
	}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1024px以下*/
@media screen and (max-width: 1024px){
  div#header-container {
    max-width: 100vw;
}
	div#header-bt-area {
    width: 45%;
    left: 0%;
}
	.sp-layer.slider_banner_box {
    min-width: 320px !important;
    min-height: 180px !important;
}
	.slider_banner_box_border {
    padding: 2.5vw 2vw !important;
}
	.navi-in a {
		font-size: 15px;
}
}

/*834px以下*/
@media screen and (max-width: 834px){
	img.site-logo-image.header-site-logo-image {
    width: 320px;
}
  div#header-bt-area {
    width: 54%;
    left: 0%;
}
	.slider_banner_box_border {
    width: 40.5vw !important;
    padding: 1vw 1vw !important;
}
	.slider_banner_box .banner_op{
		line-height: 2.9vw;
    font-size: 0.4vw;
    padding: 0.1em 0.7em;
	}
	.slider_banner_box p.second_p {
    font-size: 1.7vw;
    top: -2.5vw;
    left: -4vw;
}
	.navi-in a {
		font-size: 12px;
}
	div#content {
    padding-top: 70px;
}
	ul.mobile-footer-menu-buttons.mobile-menu-buttons {
    background-color: #ED91BD;
    color: #ffffff;
}
	.mobile-menu-buttons .menu-button > a {
    color: #ffffff;
}
	div#slide-in-sidebar {
    background-color: #fde2ef;
}
	div#navi-menu-content {
    background-color: #fde2ef;
}
	span.round_txt_r,span.round_txt_g,span.round_txt_b,span.round_txt_p,span.round_txt_o {
    width: 40px;
    height: 40px;
    line-height: 40px;
}
	div#afc_sidebar_609{
		display:none;
	}
}

/*480px以下*/
@media screen and (max-width: 480px){
  div#header-bt-area {
    display: none;
}
	.sp-layer.slider_banner_box {
    min-width: 200px !important;
    min-height: 100px !important;
    width: 200px !important;
    height: 100px !important;
    top: -12% !important;
}
	.slider_banner_box_border {
    width: 51.5vw !important;
    padding: 1vw 1vw !important;
    height: 25vw !important;
}
	h2.banner_title01 {
    font-size: 4vw !important;
    -webkit-text-stroke: 0px !important;
    text-stroke: 0px !important;
}
	h2.banner_title02 {
    font-size: 2.7vw !important;
}
	.banner_title02 span {
    border: solid 0.1rem #eb639b;
    padding: 0px 0.3rem;
}
	.slider_banner_box .banner_op {
    line-height: 4.9vw;
    padding: 0.1em 0.7em;
    height: 4.4vw;
}
	.slider_banner_box p.second_p {
    font-size: 1.7vw;
    top: -6.5vw;
    left: -10vw;
}
	.slider_banner_box .round_pink {
    width: 6vw;
    height: 6vw;
    line-height: 6vw;
}
}

/* Banner Container */
.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
}

/* Link Wrapper (if banner is clickable) */
.banner-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* Core Banner Styling */
.banner-content {
    border: 2px solid #db347a;
    border-radius: 16px;
    padding: 2rem 1.5rem;
    background: rgba(255, 255, 255, 0.95);
    max-width: 960px;
    margin: auto;
    text-align: center;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
}

/* Title Text (e.g. インストラクター) */
.banner-lead {
font-size: clamp(1.4rem, 6vw, 3rem); /* Adjust this range */
font-weight: 800;
color: #db347a;
font-family: "Noto Sans JP", sans-serif;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1),
            0 0 10px rgba(219, 52, 122, 0.15);
letter-spacing: 0.12em;
margin-bottom: 1.5rem;
line-height: 1.2;
}

/* Subtitle (e.g. 養成講座) character boxes */
.banner-title-boxes {
    display: flex;
    justify-content: center;
    gap: 1.2rem;
    margin-bottom: 1.5rem;
    flex-wrap: nowrap;
}

.char-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: clamp(3rem, 7vw, 6rem);
    height: clamp(3rem, 7vw, 6rem);
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: bold;
    border: 2px solid #db347a;
    border-radius: 10px;
    background: white;
    color: #000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease;
    line-height: 1;
}

.banner-badges-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.5rem;
}

/* Badge row (e.g. 1日, オンライン, 会場受講可能) */
.banner-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
    margin: 1rem 0;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 1rem;
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(0.9rem, 2.5vw, 1rem);
    font-weight: bold;
    background-color: #db347a;
    color: white;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.completion-text {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    color: #222;
    font-weight: 500;
    line-height: 1;
}

/* Mobile Responsiveness */
@media screen and (max-width: 480px) {

    .completion-text {
        font-size: 1rem;
        margin-top: 1rem;
    }

	.banner-content {
  		padding: 1.2rem 1rem;
  	}

  	.banner-title-boxes {
    	flex-wrap: wrap;
    	gap: 0.6rem;
  	}

  	.char-box {
    	width: 3.2rem;
    	height: 3.2rem;
    	font-size: 1.4rem;
  	}

  	.banner-badges .badge {
    	font-size: 0.8rem;
    	padding: 0.25rem 0.8rem;
  	}
}/*アニメーションの@keyframes用のCSSコードを書く（ここに書くとAMP用で約500KBまで記入できます）*/