/*
Theme Name: Yuimaru
Author: kabuyuimaru
Description: WEB集客に強い、治療院・美容室向けのテンプレートです。PC、スマホ、タブレットに対応したレスポンシブデザイン。
Tags: 整骨院、整体院
Version: 3.0
*/

@import "https://use.fontawesome.com/releases/v5.13.0/css/all.css";

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}


/* ================================================================================================
//
//  color-template.php - ホームページ全体の色合い指定//
//
// ============================================================================================== */

:root {
    --color0:#FFF3E0;/*light*/
    --color1:#FFB74D;/*main*/
    --color2:#FF9800;/*dark*/
    --colorG:#E0E0E0;/*グレー*/
    --colorB:#333;/*ブラック*/
}


/* ================================================================================================
//
//  body - ホームページ全体の指定//
//
// ============================================================================================== */

body{
    margin: 0;
    font-size:16px !important;
    line-height: 1.9 !important;
    color:#333 !important;
    text-align: left;
    background-color: #fff;
    letter-spacing: .02em;
	    background-color: #f9f8f3 !important;
}

@media only screen and (max-width:500px) {
body{    padding-bottom: 80px;
	font-size:14px !important;
}
}

footer{
min-height:520px;
background:#f4810e;	
}
@media only screen and (max-width:500px) {
footer{
min-height: 650px;
}	
}

/* ================================================================================================
//
//  見出し - h2,h3,h4//
//
// ============================================================================================== */

h2{
    font-weight: bold !important;
}

.sub_tt{
    margin-top: 2.5em !important;
    color: #fff;
    background: linear-gradient(90deg, #F4810E 0%, #f79f47 100%);
    font-size: 34px;
    padding: 32px;
    font-weight: bold;
    margin-bottom: 0;
}


h3{
    font-weight: bold !important;
}

.toph2 {
    position: relative;
    width: 100%;
    margin: 50px 0;
    padding: 20px 0;/*ボーダーとテキストに空間をあける為のpadding*/
    text-align: center;
    font-weight: bold;
}

.toph2::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 1px;
    margin: 0 auto;
    text-align: center;
    background: #fff; /*この部分は後にlinear-gradientへ*/
}

.toph2::before {
    background-image: -webkit-linear-gradient(left, transparent, #212121 25%, #212121 75%, transparent);
    background-image: linear-gradient(to right, transparent, #212121 25%, #212121 75%, transparent);
    background-position: center;
    background-repeat: no-repeat;
}

@media only screen and (max-width:500px) {
    h2{
        font-size: 1.3rem !important;
    }
    h3{
        font-size: 1.2rem !important;
    }
}

h4{
    font-size: 1.06rem !important;
    display: -webkit-inline-box;
}

@media only screen and (max-width:991px) {
    .dis-none-tab{
display: none;
    }
}

@media only screen and (min-width:992px) {
    .dis-none-pc{
display: none !important;
    }
}

b,strong{
    font-weight: 600 !important;
}


img.alignright { display: block; margin: 0 0 0 auto!important;}
img.alignleft { display: block; margin: 0 auto 0 0!important;}
img.aligncenter { display: block; margin: 0 auto!important;}

.nav-bg{
    background: var(--color1);
}

.container a{
    color: var(--colorB);
}
header a:hover{
    color: var(--color1);
    text-decoration: underline;
}
.container a:hover{
    color: var(--color1);
    text-decoration: underline;
}

.container .nav-link:hover {
    text-decoration: none;
}

li{
    list-style: none;
}

ul{
    padding: 0;
    margin:0;
}

.menu a:hover{
    text-decoration: none;
}

p{
    line-height: 1.75;
}




#subpage p{
padding-left: 1rem!important;
padding-right: 1rem!important;
}

@media only screen and (max-width:500px) {
    #lp p{
padding-left: 0.5rem!important;
padding-right: 0.5rem!important;
}


#subpage p{
padding-left: 0.5rem!important;
padding-right: 0.5rem!important;
}
}

#subpage tr,td{
    border:solid 1px var(--color0);
}

#subpage .time tr,td{
    border:solid 1px var(--color1);
}

.marker_yellow {
    background-color: #ffd740;
}

.blog-list-link a{
    color: var(--colorB);
}

.nav-btn{
    font-size: 20px;
    text-align: center;
        border-right: solid var(--color0) 1px;
}

@media only screen and (max-width:1024px) {
 .nav-btn {
    font-size: 16px;
    text-align: center;
    border-right: solid var(--color0) 1px;
}
}

.nav li:first-child{
    border-left: solid var(--color0) 1px;
}

.nav-btn a{
    color: var(--colorB);
}

element.style {
    background: #1976d2;
    border: none;
}

.fixed {
    position: fixed;
    top: 0;
    padding: 0;
    width: 100%;
    z-index: 1000;
    opacity: 0.9;
}

.sp-menu-fixed{
        position: fixed;
    top: 0;
    padding: 0;
    width: 100%;
    z-index: 1000;
    opacity: 0.97;
}

.clear{
    clear: both;
}

.container .btn-color{
    background:  var(--color2) !important;
    border-color:  var(--color0) !important;
}


.head-map-a{
    color:  var(--color1);
}

.back-btn{
    background-color:var(--color1) !important:
}

.black_head{
    background:#333333;
    min-height: 64px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    letter-spacing: 5px;
	width:100%;
background: linear-gradient(to right, #e6bc1b 1%, #fd520c 100%);	
}
.black_head_sub{
    font-size: 20px;
}

/*HOMEメインイメージ*/
.main_img_bg{
    background-position: center top;
}

.blog-cat{
    position: absolute;
    margin-top: 0px;
    z-index: 2;
    background: var(--color1);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    padding: 2px 4px;
}

/*メニュー*/
.menu li img {
    width: 100%;
    max-width:230px;
    border-radius: 3px;
    margin-right: 16px;
    float: left;
}

@media only screen and (max-width:500px) {
 .menu li img {
    width: 100%;
    border-radius: 3px;
    margin-right: 0;
    float: none;
}
}

@media only screen and (max-width:992px) {
.menu li img {
    width: 100%;
    max-width: 310px;
    border-radius: 3px;
    margin-right: 16px;
    float: left;
	margin-bottom:8px;
    }
}

.list_item {
    float: left;
    padding: 16px;
    width: 48%;
    margin-bottom: 2em;
    border: solid 1px var(--colorG);
    margin-left: 8px;
    min-height: 118px;
    border-radius: 3px;
    background:#fff;
}

@media only screen and (max-width:500px) {

.list_item {
    float: left;
    padding: 8px;
    width: 47%;
    margin-bottom:1em;
    border: solid 1px var(--colorG);
    margin-left: 8px;
	min-height:225px;
    border-radius: 3px;
}

}


@media only screen and (min-width:501px) and (max-width:1024px) {
    .list_item {
        float: left;
        padding:16px;
        width: 47%;
        margin-bottom: 1em;
        border: solid 1px var(--colorG);
        margin-left: 8px;
        min-height:280px;
        border-radius: 3px;
    }
}

.menulistTit {
    display: block;
    font-size:20px;
    color: var(--color1);
    font-weight: 600;
    letter-spacing: -1px;
    padding: 4px 0px;
}
.menulistSt {
    display: block;
    font-size: 12px;
    letter-spacing: 0;
    font-feature-settings: "palt";
    line-height:1.2;
    color:#757575;
}

@media only screen and (max-width:500px) {
.menulistTit {
    display: block;
    font-size:16px;
    color: var(--color1);
    font-weight: 600;
    letter-spacing: -1px;
    padding: 4px 0px;
	min-height: 160px;
}

}

.me-btn{
    text-align: right;
        margin-top: 16px;
}

@media (max-width: 763px) {
.me-btn {
    text-align: center;
    margin-top: 8px;
    margin-bottom: 8px;
}
}

.kuwashiku {
    font-size: 12px;
    text-align: right;
    background: var(--color2);
    border-radius: 4px;
    padding:.375rem .75rem;
    color: #fff;
    margin-bottom: 8px;
}

/*選ばれる理由*/

.reason-box {
    background: #fff;
    border-radius: 3px;
    padding: 16px 32px;
margin-bottom: 32px;
}
@media (max-width: 763px) {
 .reason-box {
    background: #fff;
    border-radius: 3px;
    padding: 16px 8px;
    margin-bottom: 16px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
}

.inner .reason-box p{
    margin:16px 0 0px;
    padding: 0 32px 0 0px;
}

@media (max-width: 763px) {
.inner .reason-box p {
    margin: 8px 0 0px;
    padding: 0 0px 0 0px;
}
}

.reason-number-tt {
    font-size: 75px;
    float: left;
    padding: 0px 0 0px;
    font-weight: 500;
    color: var(--color2);
    margin-bottom: 16px;
    line-height: 0.5;
    text-align: center;
}
.reason-tt {
padding: 24px 34px 0px 0px;
    font-size: 30px;
    font-weight: 400;
    color: var(--color1);
    display: table-cell;
    vertical-align: middle;
        line-height: 1.2;
        font-weight: bold;
}

@media (max-width: 763px) {
.reason-tt {
padding: 16px 0px 0px 8px;
    font-size: 22px;
    letter-spacing: 0;
}
.reason-tt p{
    line-height: 1.2;
}

}

@media only screen and (min-width:501px) and (max-width:1024px) {
 .reason-tt {
    padding: 0px 34px 0px 24px;
}
}

.reason {
    font-size: 14px;
    display: block;
    margin-bottom:20px;
    text-align: center;
}

@media (max-width: 763px) {
 .reason {
    font-size: 12px;
    letter-spacing: 0;
    display: block;
    margin-bottom:12px;
    text-align: center;
}
}

.reason-number{
font-size: 56px;
    padding: 4px 10px 4px;
    letter-spacing: -2px;
    font-family: 'Trebuchet MS',sans-serif;
    background: var(--color0);
    border-radius: 50%;
    color: var(--color1);
}

@media (max-width: 763px) {
.reason-number {
    font-size: 48px;
    letter-spacing: -2px;
    font-family: 'Trebuchet MS',sans-serif;
}
}

.bg-white{
    background: #fff
}

/*チェックボックス*/
.CheckBox {
margin: 2em 0;
    background: #ffffff;
    width:100%;
    margin-left: auto;
    margin-right: auto;
    border: solid 1px  var(--color1);
}

@media (max-width:736px) {
    .CheckBox {
        margin: 0em 0 24px;
        width:100%;
        margin-left: auto;
        margin-right: auto;
        border-radius: 3px;
    }
}

.CheckBox .CheckBox-title {
font-size: 24px;
    background: var(--color1);
    color: #fff;
    padding: 4px;
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.05em;
    padding: 16px 0px;
    line-height: 1.7;
}

@media (max-width:736px) {
    .CheckBox .CheckBox-title {
        font-size: 16px;
    }
}

#main .CheckBox p {
    padding: 15px 20px;
    margin: 0;
}

@media (max-width: 763px) {
    #main .CheckBox p {
        padding: 8px 16px 0;
        margin: 0px 0;
    }
}

.Checklist {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding: 24px 0;
}

@media (max-width: 763px) {
    .Checklist {
        padding: 16px 0;
        width: 95%;
    }
}

.Checklist li {
    list-style: none;
    padding: 3px 0px 3px 32px;
    line-height: 1.7;
    background-position-y: 2px;
    border-bottom: dotted 2px #fcd69e;
    font-size: 22px;
}

@media (max-width: 763px) {
    .Checklist li {
        padding: 8px 0 8px 25px;
        font-size: 14px;
        line-height: 1.7;
    }

}

.Checklist li:before {
    margin-left: -25px;
    position: absolute;
    font-family: FontAwesome;
    content: '\f14a';
    color: #ff9800;
}



.check_left {
float: left;
    width: 55%;
    margin-top: 5px;
    padding: 0 8px 0 16px;
}

.check_right {
    float: right;
    width: 40%;
    padding: 16px;
}

.check_left li {
    list-style: none;
    padding: 8px 0px 8px 72px;
    line-height: 2.4;
    font-size: 19px;
    font-weight: 400;
    text-indent: 0px;
}

.check_left li p{
	display: inline;
}

.check-color{
    color: var(--color2);
}

@media (max-width: 763px) {
.check_left {
float: none;
    width: 100%;
    margin-top: 5px;
    padding: 0 8px;
}

.check_right {
    float: none;
    width: 95%;
    padding: 16px 0 16px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    text-align: center;
}


.check_right img{
    width: 100%;
}

.check_left li {
    list-style: none;
    padding: 3px 0px 3px 0px;
    line-height: 3;
    background-size: 25px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 16px;
    text-indent: unset;
}

}

.check-only {
float:none;
    width:100%;
    margin-top: 5px;
    padding:16px 8px 16px 42px;
    margin-left:auto;
    margin-right:auto;
    border: solid 16px #eee;
}

.check-only li {
list-style: none;
    padding: 4px 14px 4px 0px;
    line-height: 2.4;
    font-size: 20px;
    font-weight: 400;
    text-indent: 0px;
    border-bottom: dotted 2px #e0e0e0;
}

.check-color{
    color: var(--color1);
}

@media (max-width: 763px) {
.check-only {
    float: none;
    width: 100%;
    margin-top: 5px;
    padding: 16px 8px 16px 16px;
    margin-left: auto;
    margin-right: auto;
    border: solid 6px var(--color0);
}

.check-only li {
list-style: none;
    padding: 10px 0px 10px 0px;
    line-height: 3;
    background-size: 25px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 0px;
    text-indent: 0px;
}

}

/*店内の雰囲気*/
.tennai_box {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
margin-top: 56px;
    margin-bottom: 56px;
}

@media (max-width: 763px) {
.tennai_box {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 8px;
    margin-bottom: 32px;
}

}

/*Google map レスポンシブ*/
.gmap {
position: relative;
padding-bottom: 60%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.gmap iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}

.movie {
                position: relative;
                padding-bottom: 56.25%;
                /* 16:9 アスペクト比 */
                height: 0;
                overflow: hidden;
                max-width: 100%;
                background: #000;
}
.movie iframe {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border: 0;
}


/*TOPブログサムネイル*/
.blog-list-left{
     float: left;
    width: 100%;
}

.blog-list-right{
    float: left;
    width:100%;
    padding: 0 8px;
}


@media only screen and (max-width: 500px) {
.blog-list-left{
     float: left;
    width: 40%;
}

.blog-list-right{
    float: left;
    width: 60%;
    padding: 0 8px;
}


.blog-list-right p{
    font-size: 14px;
    color: #757575;
}

.blog-title{
    font-size: 14px !important;
    line-height: 1.5;
}

.blog-p {
    font-size: 14px;
}

	.old-list a{
		font-size:14px;
		letter-spacing:-1px;
	}
	
}

.date{
    font-size: 13px;
    color: #757575;
}


/*予約ボタン*/

#contact .btn{
  font-size: 1.6rem;
  font-weight:500;
  line-height: 1.3;
  position: relative;
  display: inline-block;
  padding: 2rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  border-radius: 0.5rem;
    width: 100%;
    max-width:560px;
    box-shadow: 0 0 10px rgba(0 0 0 / .2);
}

#contact .btn:hover{
    opacity: 0.8;
}
@media only screen and (max-width: 500px) {

#contact .btn{
    font-size: 16px;
    padding: 1.7rem 1rem;
}
}


#contact .fa-position-left {
  position: absolute;
  top: calc(50% - 0.5em);
  left: 1rem;
      font-size: 48px;
}

#contact .fa-position-right {
  position: absolute;
  top: calc(50% - 0.5em);
  right: 1rem;
}

@media only screen and (max-width: 500px) {

#contact .fa-position-left {
    font-size: 32px;
    left: 8px;
}

}


#contact .red,#header .red{
    background: #cc0000;
    color: #fff;
	border: solid 2px #900;
}

#contact .red span,#header .red span{
    color: #FFEB3B;
    padding: 0 24px;
}

#contact .blue,#header .blue{
    background: #266fbc;
    color: #fff;
}
#contact .blue span,#header .blue span{
    color: #FFEB3B;
    padding: 0 24px;
}
#contact .light-blue,#header .light-blue{
    background: #72c9f3;
    color: #fff;
}
#contact .light-blue span,#header .light-blue span{
    color: #FFEB3B;
    padding: 0 24px;
}
#contact .green,#header .green{
    background: #07b53b;
    color: #fff;
}
#contact .green span,#header .green span{
    color: #FFEB3B;
    padding: 0 24px;
}

#contact .deep-green,#header .deep-green{
    background: #019245;
    color: #fff;
}
#contact .deep-green span,#header .deep-green span{
    color: #FFEB3B;
    padding: 0 24px;
}

#contact .yellow,#header .yellow{
    background: #eaaa00;
    color: #212121;
}
#contact .yellowue span,#header .yellow span{
    color: #212121;
    padding: 0 24px;
}

#contact .pink,#header .pink{
    background: #ec407a;
    color: #fff;
}
#contact .pink span,#header .pink span{
    color: #FFEB3B;
    padding: 0 24px;
}

#contact .deep-pink,#header .deep-pink{
    background: #98014e;
    color: #fff;
}
#contact .deep-pink span,#header .deep-pink span{
    color: #FFEB3B;
    padding: 0 24px;
}

#contact .orange,#header .orange{
    background: #eb6100;
    color: #fff;
}
#contact .orange span,#header .orange span{
    color: #FFEB3B;
    padding: 0 24px;
}

#contact .white,#header .white{
    background: #F5F5F5;
    color: #212121;
}



#contact .grad-red,#header .grad-red{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff8a8b+0,fd6b6c+30,ea4445+100 */
background: #cc0000  !important; /* Old browsers */
background: -moz-linear-gradient(top,  #f88 0%,#f55 30%,#cc0000 100%) !important; /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #f88 0%,#f55 30%,#cc0000 100%) !important; /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #f88 0%,#f55 30%,#cc0000 100%) !important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8a8b', endColorstr='#ea4445',GradientType=0 ); /* IE6-9 */
color:#fff;
}

#contact .grad-red span,#header .grad-red span{
    background: unset !important;
    color: #FFEB3B;
    padding: 0 24px;
    border-radius: 3px;
    font-weight: 700;
    box-shadow: none;
}

#contact .grad-blue,#header .grad-blue{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#64b5f6+0,2196f3+30,1976d2+100 */
background: #64b5f6; /* Old browsers */
background: -moz-linear-gradient(top,  #84b4e6 0%,#2f80d5 30%,#266fbc 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #84b4e6 0%,#2f80d5 30%,#266fbc 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #84b4e6 0%,#2f80d5 30%,#266fbc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64b5f6', endColorstr='#1976d2',GradientType=0 ); /* IE6-9 */
color:#fff;
}

#contact .grad-blue span,#header .grad-blue span{
    background: unset !important;
    color: #FFEB3B;
    padding: 0 24px;
    border-radius: 3px;
    font-weight: 700;
}

#contact .grad-light-blue,#header .grad-light-blue{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#bff2fa+0,b0ecf7+30,6dd9ef+100 */
background: #72c9f3; /* Old browsers */
background: -moz-linear-gradient(top,  #d0edfb 0%,#91d5f6 30%,#72c9f3 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #d0edfb 0%,#91d5f6 30%,#72c9f3 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #d0edfb 0%,#91d5f6 30%,#72c9f3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bff2fa', endColorstr='#6dd9ef',GradientType=0 ); /* IE6-9 */
color:#1c505a;
}

#contact .grad-light-blue span,#header .grad-light-blue span{
    background: unset !important;
    color:#1c505a;
    padding: 0 24px;
    border-radius: 3px;
    font-weight: 700;
}

#contact .grad-yellow,#header .grad-yellow{
    color: #212121;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fff899+0,fff45e+30,fff100+100 */
background: #fff899; /* Old browsers */
background: -moz-linear-gradient(top,  #fff0c8 0%,#ffbd0d 30%,#eaaa00 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #fff0c8 0%,#ffbd0d 30%,#eaaa00 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #fff0c8 0%,#ffbd0d 30%,#eaaa00 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff899', endColorstr='#fff100',GradientType=0 ); /* IE6-9 */
}


#contact .grad-green,#header .grad-green{
    color: #fff;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#14e458+0,00cd43+30,00be3e+100 */
background: #07b53b; /* Old browsers */
background: -moz-linear-gradient(top,  #0bdc49 0%, #00cd43 30%, #07b53b 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #0bdc49 0%,#00cd43 30%,#07b53b 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #0bdc49 0%,#00cd43 30%,#07b53b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#14e458', endColorstr='#00be3e',GradientType=0 ); /* IE6-9 */
}

#contact .grad-green span,#header .grad-green span{
    background: unset !important;
    color: #FFEB3B;
    padding: 0 24px;
    border-radius: 3px;
    font-weight: 700;
}

#contact .grad-deep-green,#header .grad-deep-green{
color: #fff;
    background: #14e458;
    background: -moz-linear-gradient(top, #14e458 0%, #00cd43 30%, #00be3e 100%);
    background: -webkit-linear-gradient(top, #14e458 0%,#00cd43 30%,#00be3e 100%);
    background: linear-gradient(to bottom, #14e458 0%,#00cd43 30%,#00be3e 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#14e458', endColorstr='#00be3e',GradientType=0 );
    background: #1b7e40;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(50%, #1b7e40), to(#20b958));
    background: -webkit-linear-gradient(bottom, #1b7e40 50%, #20b958 100%);
    background: linear-gradient(0deg, #1b7e40 50%, #20b958 100%);
}

#contact .grad-deep-green span,#header .grad-deep-green span {
    background: unset !important;
    color: #FFEB3B;
    padding: 0 24px;
    border-radius: 3px;
    font-weight: 700;
}

#contact .grad-pink,#header .grad-pink{
    color: #fff;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fe95a8+0,ff758d+31,f5586b+100 */
background: #fe95a8; /* Old browsers */
background: -moz-linear-gradient(top,  #fe95a8 0%, #ff758d 31%, #f5586b 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #fe95a8 0%,#ff758d 31%,#f5586b 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #fe95a8 0%,#ff758d 31%,#f5586b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe95a8', endColorstr='#f5586b',GradientType=0 ); /* IE6-9 */
}

#contact .grad-pink span,#header .grad-pink span{
    background: unset !important;
    color: #FFEB3B;
    padding: 0 24px;
    border-radius: 3px;
    font-weight: 700;
}

#contact .grad-deep-pink,#header .grad-deep-pink{
    color: #fff;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e12a5d+0,c52955+30,a61f45+100 */
background: #e12a5d; /* Old browsers */
background: -moz-linear-gradient(top,  #e12a5d 0%, #c52955 30%, #a61f45 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #e12a5d 0%,#c52955 30%,#a61f45 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #e12a5d 0%,#c52955 30%,#a61f45 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e12a5d', endColorstr='#a61f45',GradientType=0 ); /* IE6-9 */
}

#contact .grad-deep-pink span,#header .grad-deep-pink span {
    background: unset !important;
    color: #FFEB3B;
    padding: 0 24px;
    border-radius: 3px;
    font-weight: 700;
}


#contact .grad-orange,#header .grad-orange{
    color: #fff;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffa000+0,ff8f00+30,ff6f00+100 */
background: #ffa000; /* Old browsers */
background: -moz-linear-gradient(top,  #ffa000 0%, #ff8f00 30%, #ff6f00 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffa000 0%,#ff8f00 30%,#ff6f00 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffa000 0%,#ff8f00 30%,#ff6f00 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa000', endColorstr='#ff6f00',GradientType=0 ); /* IE6-9 */
}

#contact .grad-orange span,#header .grad-orange span{
    background: unset !important;
    color: #FFEB3B;
    padding: 0 24px;
    border-radius: 3px;
    font-weight: 700;
}

#contact .grad-gold,#header .grad-gold{
background: linear-gradient(135deg, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
    color: #5a3201;
}

#contact .grad-gold span,#header .grad-gold span{
    background: unset !important;
    color: #5a3201;
    padding: 0 24px;
    border-radius: 3px;
    font-weight: 700;
}

#contact .grad-white,#header .grad-white{
background: #f1e767;
  background: -webkit-gradient(linear, left top, left bottom, from(#fdfbfb), to(#ebedee));
  background: -webkit-linear-gradient(top, #fdfbfb 0%, #ebedee 100%);
  background: linear-gradient(to bottom, #fdfbfb 0%, #ebedee 100%);
    color: #212121;
}

#contact .grad-white span,#header .grad-white span {
    background: unset !important;
    color:#212121;
    padding: 0 24px;
    border-radius: 3px;
    font-weight: 700;
}

/*背景矢印*/
.arrow::before{
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border: solid 6px transparent;
    border-left: solid 8px  var(--color0);
    top: 33%;
    left: -3px;
    margin-top: 0px;
}

.arrow:nth-child(1)::before {
display: none;
}

@media only screen and (max-width: 500px) {
.arrow::before{
    top: 22%;
    display: none;
}
.arrow:nth-child(2n+1)::before {
display: none;
}
}

/*LINE*/
.linebg{
 background: #FFFDE7;
}

.tokuten{
   font-size: 20px;
    margin-bottom:16px;
}

.tokuten span{
background: var(--color2);
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 8px;
    font-size: 24px;
    color: #fff;
}

@media only screen and (max-width: 500px) {

 .tokuten {
    font-size: 14px;
    margin-bottom: 16px;
}

.tokuten span {
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 8px;
    font-size: 14px;
}
}

.line-tt {
  line-height: 60px;
  position: relative;
  height: 60px;
  margin: 2em 50px 1em;
  padding: 0 2rem;
  text-align: center;
  color: #fff;
  background:#fa4141;
      font-size: 24px;
    font-weight: 600;
}

.line-tt:before,
.line-tt:after {
  position: absolute;
  top: 0;
  display: block;
  height: 48px;
  content: '';
  border: 30px solid #bf1a2f;
}

.line-tt:before {
  left: -40px;
  border-left-width: 15px;
  border-left-color: transparent;
}

.line-tt:after {
  right: -40px;
  border-right-width: 15px;
  border-right-color: transparent;
}

.line-tt span {
  position: relative;
  display: block;
font-size:18px;
    font-weight:600;
}

@media only screen and (max-width: 500px) {
.line-tt {
    line-height:20px;
    position: relative;
    height: 60px;
    margin: 1em 30px 1em;
    padding: 10px 0rem 0;
    text-align: center;
    color: #fff;
    background: #fa4141;
    font-size: 15px !important;
}


.line-tt:before, .line-tt:after {
    position: absolute;
    top: 0;
    display: block;
    height: 40px;
    content: '';
    border: 30px solid #bf1a2f;
}

.line-tt:before {
    left: -40px;
    border-left-width: 15px;
    border-left-color: transparent;
}

.line-tt:after {
    right: -40px;
    border-right-width: 15px;
    border-right-color: transparent;
}


.line-tt span {
font-size: 15px;
}

}

/*予約部分*/

.Mi1 {
    font-size: 1.5rem;
    font-weight: 500;
    text-align: center;
        margin-bottom: 0;
}

.Mi2 {
    margin-bottom: 10px;
    font-size: 1.1rem;
    text-align: center;
}

@media only screen and (max-width: 500px) {
.Mi1 {
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 0;
}
.Mi2 {
    margin-bottom: 10px;
    font-size:14px;
    text-align: center;
}

}

.time{
width: 100%;
    border: solid 1px var(--color1);
    text-align: center;
    font-weight: 300;
    color:var(--color1);
    line-height:2.5;
}

.time tr{
border-bottom: solid 1px var(--color1);
font-weight: 300;
}

.time th{
     border-right: solid 1px var(--color1);
     font-weight: 300;
}

.time td{
     border-right: solid 1px var(--color1);
     font-weight: 300;
}

.other-li{
    margin-bottom:8px;
}

.other-tt{
    background: var(--color2);
    padding: 2px 16px;
    border-radius: 5px;
    color: #fff;
    margin-right: 8px;
}

/*フッター部分*/

.footer{
    color:#fff;
}

.footer a{
    color:#fff;
}

.footer a:hover{
    color:#fff;
}

.footer ul{
    line-height:2.4;
}

.footer-title{
font-weight: 500;
    font-size: 20px;
    color: var(--colorB);
    border-bottom: solid 2px var(--colorG);
}
.f-tt {
    background: var(--color1);
    padding: 4px 8px;
    border-radius: 3px;
    margin-right: 8px;
    color: #fff;
}

/*ヘッダー*/
.head-h1 {
font-size: 14px;
    font-weight: 400;
    max-width:1660px;
    padding: 6px 0;
    margin: auto;
}

.head-parking {
    background: #ffffff;
    padding: 0 8px;
    color: var(--color1);
    border: solid 1px var(--color1);
    border-radius: 4px;
    font-size: 14px;
    margin-right: 8px;
    margin-left: 8px;
    font-weight: 500;
    display: inline-block;
}

#header .btn{
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  position: relative;
  display: inline-block;
  padding:12px 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  border-radius: 0.5rem;
    width: 100%;
}



/*ナビメニュー*/

.nav-link{
position: relative;
}
.navmenu ul li a::before,
.navmenu ul li a::after {
  border-bottom: solid 2px var(--color1);
  bottom: 0;
  content: "";
  display: block;
  position: absolute;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  width: 0;
}
.navmenu ul li a::before {
  left: 49%;
}
.navmenu ul li a::after {
  right: 49%;
}
.navmenu ul li a:hover::before,
.navmenu ul li a:hover::after {
  width: 50%;
}

/*見出し h2*/
.border-solid{
  border-bottom: 3px solid var(--color1);
  padding-bottom: 10px;
}

.border-dot {
  border-bottom: 3px dotted var(--color1);
  padding-bottom: 10px;
}

.border-dashed{
      border-bottom: 3px dashed var(--color1);
      padding-bottom: 10px;
}

.border-double{
  border-bottom: 6px double var(--color1);
  padding-bottom: 10px;
}

.border-under-two {
  position: relative;
  padding: 1rem 0;
  border-bottom: 3px solid  var(--color0);
}

.border-under-two:before {
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 20%;
  height: 3px;
  content: '';
  background:  var(--color1);
}

.border-under-strip{
      position: relative;
  padding: 1.5rem 0;
}

.border-under-strip:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  content: '';
  background-image: -webkit-repeating-linear-gradient(135deg, var(--color1), var(--color1) 1px, transparent 2px, transparent 5px);
  background-image: repeating-linear-gradient(-45deg,  var(--color1), var(--color1) 1px, transparent 2px, transparent 5px);
  background-size: 7px 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.border-left-single {
  padding: 1rem 1rem;
  border-left: 6px solid var(--color1);
}

.border-left-double {
  padding: 1rem 1rem;
  border-left: 6px double  var(--color1);
}

.border-kakomi {
  padding: 1rem 1rem;
  border: 3px solid  var(--color1);
}

.border-kakomi-dot {
  padding: 1rem 1rem;
  border: 3px dotted  var(--color1);
}

.border-kakomi-hasen {
  padding: 1rem 1rem;
  border: 3px dashed var(--color1);
}

.border-kakomi-double {
   position: relative;
  padding: 1rem 1rem;
  border: 4px solid  var(--color1);
}

.border-kakomi-double:before {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  content: '';
  border: 2px solid  var(--color1);
}

.tb-border {
  padding: 1rem 1rem;
  border-top: 3px solid  var(--color1);
  border-bottom: 3px solid  var(--color1);
}

.tb-double {
padding: 1rem 1rem;
  border-top: 6px double  var(--color1);
  border-bottom: 6px double  var(--color1);
}

.bg-fill{
  padding: 1rem 1rem;
  background:var(--color1);
  color:#fff;
border-radius: 3px;
}

.bg-left{
  padding: 1rem 1rem;
  border-left: 5px solid  var(--color1);
  background:var(--color0);
  color: var(--color2);
}

.bg-top{
   padding: 1rem 1rem;
  border-top: 3px solid  var(--color1);
  background:var(--color0);
  color: var(--color2);
}

.bg-under{
  padding: 1rem 1rem;
  border-bottom: 3px solid  var(--color1);
  background:var(--color0);
  color: var(--color2);
}

.null{
    border: none;
    background: none;
}

.null:before{
    display: none;
}

.ribon1 {
  line-height: 60px;
  position: relative;
  height: 60px;
  margin: 2em 50px 1em;
  padding: 0 2rem;
  text-align: center;
  color: #fff;
  background:#fa4141;
      font-size: 24px;
    font-weight: 600;
}

.ribon1:before,
.ribon1:after {
  position: absolute;
  top: 0;
  display: block;
  height: 48px;
  content: '';
  border: 30px solid #fa4141;
}

.ribon1:before {
  left: -40px;
  border-left-width: 15px;
  border-left-color: transparent;
}

.ribon1:after {
  right: -40px;
  border-right-width: 15px;
  border-right-color: transparent;
}

.ribon1 span {
  position: relative;
  display: block;
font-size:18px;
    font-weight:600;
}

@media only screen and (max-width:500px) {

    .ribon1 {
    line-height: 20px;
    position: relative;
    height: 60px;
    margin: 1em 45px 1em;
    padding: 18px 0rem 0;
    text-align: center;
    color: #fff;
    background: #fa4141;
    font-size: 16px !important;
}

.ribon1:before {
  left: -44px;
  border-left-width: 15px;
  border-left-color: transparent;
}

.ribon1:after {
  right: -44px;
  border-right-width: 15px;
  border-right-color: transparent;
}

}

.ribon2 {
  position: relative;
  margin: 1rem -35px;
  padding: 1rem 2rem;
    background: var(--color1);
    color: #fff;
    text-align:center;
}

.ribon2:before,
.ribon2:after {
  position: absolute;
  content: '';
}

.ribon2:before {
  bottom: -10px;
  left: 0;
  width: 0;
  height: 0;
  border-top: 10px solid  var(--color2);
  border-left: 10px solid transparent;
}

.ribon2:after {
  right: 0;
  bottom: -10px;
  width: 0;
  height: 0;
  border-top: 10px solid  var(--color2);
  border-right: 10px solid transparent;
}

@media only screen and (max-width:500px) {
.ribon2 {
  position: relative;
  margin: 1rem -10px;
  padding: 1rem 1rem;
  text-align:center;
}

}

@media only screen and (min-width:501px) and (max-width:1024px) {
 .ribon2 {
  position: relative;
  margin: 1rem -25px;
  padding: 1rem 1rem;
  text-align:center;
}
}

.img-sentenceBoxL{
float: left;
width: 40%;
}

.img-sentenceBoxR{
float:left;
width: 60%;
}

.img-sentenceBoxL2{
float: left;
width: 60%;
}

.img-sentenceBoxR2{
float:left;
width: 40%;
}

@media only screen and (max-width:500px) {
.img-sentenceBoxL,.img-sentenceBoxR,.img-sentenceBoxL2,.img-sentenceBoxR2{
float: none;
width: 100%;
}

}


.list-box {
    position: relative;
    border: solid 3px var(--color1);
    border-radius: 3px;
}

#subpage .list-box p{
padding:0 !important;
margin-bottom: 0 !important;
}

.list-box ul{
    margin:0;
}

.list-box .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: var(--color1);
    font-weight: bold;
}

.li-numb ol {
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
    padding-left: 16px;
    margin-bottom: 0;
}

@media only screen and (max-width:500px) {
    .li-numb ol {
    padding-left:0px;
    margin-bottom: 0;
}
}

.li-numb ol li {
    position: relative;
    padding-left: 30px;
    line-height: 1.5em;
    padding: 0.5em 0.5em 0.5em 30px;
    list-style: none;
}

.li-numb ol li:before {
    position: absolute;
    counter-increment: number;
    content: counter(number);
    display: inline-block;
    background:  var(--color1);
    color: white;
    font-family: 'Avenir', 'Arial Black', 'Arial', sans-serif;
    font-weight: bold;
    font-size: 15px;
    border-radius: 50%;
    left: 0;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    top: 50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

/*チャット風会話文----------------------------------------------------*/
.kaiwa {
    margin-bottom: 25px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 763px) {
    .kaiwa {
        width: 95%;
    }
}

/* 左画像 */
.kaiwa-img-left {
    margin: 0;
    float: left;
    width: 60px;
    height: 60px;
    margin-right: -70px;
}

/* 右画像 */
.kaiwa-img-right {
    margin: 0;
    float: right;
    width: 60px;
    height: 60px;
    margin-left: -70px;
}

.kaiwa figure img {
    width: 100%;
    height: 100%;
    border: 1px solid #aaa;
    border-radius: 50%;
    margin: 0;
}

@media (max-width: 763px) {
    .kaiwa figure img {
        width: 80%;
        height: 80%;
    }
}

/* 画像の下のテキスト */
.kaiwa-img-description {
    padding: 5px 0 0;
    font-size: 10px;
    text-align: center;
    position: relative;
    bottom: 15px;
}

/* 左からの吹き出しテキスト */
.kaiwa-text-right {
    position: relative;
    margin-left: 80px;
    padding: 10px;
    border-radius: 10px;
    background:#eee;
    margin-right: 12%;
    float: left;
}

@media (max-width: 763px) {
    .kaiwa-text-right {
        position: relative;
        margin-left: 65px;
        padding: 10px;
        border-radius: 10px;
        margin-right: 5%;
        float: left;
    }
}

/* 右からの吹き出しテキスト */
.kaiwa-text-left {
    position: relative;
    margin-right: 80px;
    padding: 10px;
    border-radius: 10px;
    background-color: var(--color0);
    margin-left: 12%;
    float: right;
}

@media (max-width: 763px) {
    .kaiwa-text-left {
        position: relative;
        margin-right: 75px;
        padding: 10px;
        border-radius: 10px;
        margin-left: 5%;
        float: right;
    }
}

#mian p.kaiwa-text {
    margin: 0 0 20px;
}

#mian p.kaiwa-text:last-child {
    margin-bottom: 0;
}

/* 左の三角形を作る */
.kaiwa-text-right:before {
    position: absolute;
    content: '';
    border: 10px solid transparent;
    top: 15px;
    left: -20px;
}

.kaiwa-text-right:after {
    position: absolute;
    content: '';
    border: 10px solid transparent;
    border-right: 10px solid #eee;
    top: 15px;
    left: -19px;
}

/* 右の三角形を作る */
.kaiwa-text-left:before {
    position: absolute;
    content: '';
    border: 10px solid transparent;
    top: 15px;
    right: -20px;
}

.kaiwa-text-left:after {
    position: absolute;
    content: '';
    border: 10px solid transparent;
    border-left: 10px solid var(--color0);
    top: 15px;
    right: -19px;
}

/* 回り込み解除 */
.kaiwa:after,
.kaiwa:before {
    clear: both;
    content: "";
    display: block;
}


/*Q and A*/
.qanda {
    width: 98%;
    margin-bottom:16px;
    padding: 0px 10px;
    background: #fff;
    line-height: 1.7;
    margin-left: auto;
    margin-right: auto;
    border-bottom: solid 1px var(--colorG);
}

.qanda:last-child {
    border-bottom:none;
}


.qanda dt span {
    display: table-cell;
    vertical-align: middle;
    text-align: left;
    font-size: 18px;
}

dd p {
    font-size: 16px;
    text-align: left;
    line-height: 1.75em;
}

.qanda dt {
    position: relative;
    display: table;
    width: 91%;
    min-height: 76px;
    padding:20px 10px 10px 60px;
    font-weight: 600;
    margin: 0;
}

.qanda dt:before {
    position: absolute;
    top: 10px;
    left: 0;
    display: block;
    width: 55px;
    height: 55px;
    content: "Q";
    text-align: center;
    color:#fff;
    border: 4px solid #eeeeee;
    border-radius: 33px;
    background: var(--color2);
    font-size: 40px;
    font-size: 32px;
    line-height: 48px;
        font-weight: 500;
}

.qanda dd {
    position: relative;
    display: table;
    min-height: 76px;
    padding: 10px 10px 0px 60px;
    margin-left: 0;
}

.qanda dd:before {
    position: absolute;
    top: 5px;
    left: 0;
    display: block;
    width: 55px;
    height: 55px;
    content: "A";
    text-align: center;
    color: var(--color2);
    border: 4px solid #eeeeee;
    border-radius: 33px;
    font-size: 40px;
    font-size: 32px;
    line-height: 56px;
    background-color:#FAF3E1;
        font-weight: 500;
}

@media (max-width: 763px) {
    .qanda {
    width: 100%;
    margin: 10px;
    padding: 0px 8px;
    background: #fff;
    line-height: 1.7;
    margin-left: auto;
    margin-right: auto;
    }

    .qanda dt {
    position: relative;
    display: table;
    width: 100%;
    padding: 12px 10px 10px 48px;
    font-weight: 600;
    margin: 8px 0;
    font-size: 16px;
    min-height: auto;
    }

    .qanda dt:before {
        position: absolute;
        top: 9px;
        left: 0;
        display: block;
        width: 35px;
        height: 35px;
        content: "Q";
        text-align: center;
        border: 3px solid #eeeeee;
        border-radius: 33px;
        font-size: 18px;
        line-height: 28px;
    }

    .qanda dt span {
        display: table-cell;
        vertical-align: middle;
        text-align: left;
        font-size: 16px;
    }

    .qanda dd {
    position: relative;
    display: table;
    min-height: 76px;
    padding: 6px 10px 0px 32px;
    }

    .qanda dd:before {
        position: absolute;
        top: 5px;
        left: 0px;
        display: block;
        width: 35px;
        height: 35px;
        content: "A";
        text-align: center;
        border: 4px solid #eeeeee;
        border-radius: 33px;
        font-size: 40px;
        font-size: 24px;
        line-height: 28px;
    }

    .qanda dd p {
        padding: 0;
        margin: 0px 0 16px 0;
    }
}

.step_list p{
line-height: 1.5;
}

.step_numb {
    position: absolute;
    background: var(--color1);
    color: #ffffff;
    border: solid 3px var(--color0);
    border-radius: 50%;
    width: 56px;
    height: 56px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    top: -5px;
    line-height: 2.2;
}

/*ボックス*/

.box p{
    margin:0;
    padding:0;
}

.box-solid{
padding: 0.5em 1em;
margin-bottom: 2em;
    border: solid 3px var(--color1);
}
.box-round{
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    color:  var(--color1);/*文字色*/
    background: #FFF;
    border: solid 3px  var(--color1);/*線*/
    border-radius: 10px;/*角の丸み*/
}
.box-fill{
padding: 0.5em 1em;
    margin: 2em 0;
    color: var(--color2);
    background: var(--color0);
}
.box-double{
    padding: 0.5em 1em;
    margin: 2em 0;
    border: double 5px  var(--color1);
}
.box-dashed{
    padding: 0.5em 1em;
    margin: 2em 0;
    background:var(--color0);
    border: dashed 2px var(--color1);/*点線*/
}
.box-fusen{
    padding: 0.5em 1em;
    margin: 2em 0;
    color: var(--colorB);
    background: #fff8e8;
    border-left: solid 10px #ffc06e;
}

.box-fukidashi{
    position: relative;
    padding: 0.8em 0.7em;
    margin: 1em 0;
    background: var(--color0);
    color: var(--color1);
    font-weight: bold;
    font-size: 20px;
    border-radius: 3px;
}
.box-fukidashi:after{
    position: absolute;
    content: '';
    top: 100%;
    left: 30px;
    border: 15px solid transparent;
    border-top: 15px solid var(--color0);
    width: 0;
    height: 0;
}

.box-fukidashi p{
    line-height:1.3 !important;
}

.box-title1 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px var(--color2);
    border-radius: 8px;
}
.box-title1 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: var(--color2);
    font-weight: bold;
}

.box-title2 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px var(--color2);
}
.box-title2 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: var(--color2);
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}

.box-title3 {
    position: relative;
    margin: 2em 0;
    padding: 25px 10px 7px;
    border: solid 2px var(--color2);
}
.box-title3 .box-title{
    position: absolute;
    display: inline-block;
    top: -2px;
    left: -2px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background:var(--color2);
    color: #ffffff;
    font-weight: bold;
}

.box-title4 {
    margin: 2em 0;
    background:var(--color0);
}
.box-title4 .box-title {
    font-size: 1.2em;
    background: var(--color2);
    padding:0px 4px 4px 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}

.box-title4 p {
    padding: 15px 20px;
    margin: 0;
}

.box-title5 {
    margin: 2em 0;
    background: #dcefff;
}
.box-title5 .box-title {
    font-size: 1.2em;
    background: #5fb3f5;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box-title5 p {
    padding: 15px 20px;
    margin: 0;
}

.tyui {
    margin-bottom: 1.5em;
    padding: 1em;
    background: #ffebeb;
    color:#dc3545;
    margin-left: auto;
    margin-right: auto;
    border: solid 2px #dc3545;
}

.tyui li{
    list-style: disc;
    list-style-position: inside;
    padding-left: 16px;
    line-height: 1.7;
}

#subpage .tyui p{
padding:0 !important;
}


@media only screen and (max-width:500px) {
.tyui li{
    padding-left: 8px;

}
}

.tyui_title {
    margin-bottom: 5px;
    color:#dc3545;
    font-size: 1.2em;
    font-weight: bold;
}

.tyui_title:before {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 0 3px 0 0;
    border-radius: 50%;
    background: #ff8376;
    color: #fff;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    line-height: 30px;
}

#main .tyui p {
    margin: 0 0 0em;
    line-height: 1.75;
    padding: 0px 16px;
}

.attention{
    background:#dc3545;
    width: 36px;
    height: 36px;
    text-align: center;
    padding: 8px;
    border-radius: 50%;
    margin-right: 8px;
    color: #fff;
}

.main-lp-img img{
width: 100%;
}

/*TOPへ戻るボタン*/
.back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display:none;
    border-radius:50% !important;
    background:var(--color1) !important;
    border-color:var(--color1) !important;
}

@media (max-width: 763px) {
	.back-to-top {
		bottom: 110px;
		right: 10px;
	}
}


.glyphicon-chevron-up::before {
    content: "\f106";
    font-family:'Font Awesome 5 Free';
    font-weight:900;
}

/* 必須マーク */
.must{
    color: #fff;
    margin-right: 10px;
    padding: 6px 10px;
    background: #F92931;
    border-radius: 20px;
}

/* 任意マーク */
.free {
    color: #fff;
    margin-right: 10px;
    padding: 6px 10px;
    background: #424242;
    border-radius: 20px;
}

/* 項目名を太字にする */
form p {
    font-weight: 600;
}

/* 入力項目を見やすくする */
input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea {
    width: 100%;
    padding: 8px 15px;
    margin-right: 10px;
    margin-top: 10px;
    border: 1px solid #d0d5d8;
    border-radius: 3px;
}
textarea.wpcf7-form-control.wpcf7-textarea {
    height: 200px;
}

/* 必須項目の入力欄を黄色にする */
input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
    background: rgba(255, 255, 142, 0.46);
}

/* 送信ボタンを見やすくする */
input.wpcf7-submit {
width: 100%;
    height: 80px;
    background: #27c038;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    border: solid 3px #3da949;
    border-radius: 3px;
}

/* エラーメッセージを見やすくする */
span.wpcf7-not-valid-tip,
.wpcf7-response-output.wpcf7-validation-errors {
    color: red;
    font-weight: 600;
}

.form-w{
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.blog-list-left img{
border: none;
    vertical-align: bottom;
    max-width: 100%;
    height: auto;
}

/*スマホ固定バナー*/
.sp_banner{
    position: fixed;
    bottom: 0;
    z-index: 999;
    left:0;
}

.text-center{
     margin-left: auto;
    margin-right: auto;
}

.price-tt{
    background: var(--color2);
    padding: 8px 16px;
    font-size: 24px;
    font-weight: 500;
    color: #fff;
}

.price-price{
    border:solid 1px var(--color1);
    padding: 8px;
    font-size: 16px;
    text-align: center;
    line-height: 1.4;
}

.n-p{
    font-size: 20px;
    padding: 0 8px;
}

@media only screen and (max-width:500px) {
    .n-p{
display: block;
}
}

.f-p{
    font-size:28px;
    padding: 0 8px;
    font-weight: 600;
    color: #F44336;
        display: block;
}

.pn_btn a{
background: var(--color2);
    padding: 2px 6px;
    border-radius: 5px;
    color: #fff;
}

.col-text{
     display: block;
    font-size: 14px;
    margin-top: 8px;
}

.nav-con{
    line-height: 1;
    font-size: 11px;
    display: inline-block;
    font-weight: 500;
}


@media only screen and (min-width:501px) and (max-width:1024px) {
    .nav-con{
    line-height: 1;
    font-size: 20px;
    display: inline-block;
    font-weight: 500;
}
}

/* PC,SP表示切り替え　
========================================================================== */

.pc {
    display: block !important;
}

.sp {
    display: none !important;
}


@media only screen and (max-width: 680px) {
    .pc {
        display: block !important;
    }

    .sp {
        display: none !important;
    }
}

@media (max-width: 500px) {
    .pc {
        display: none !important;
    }

    .sp {
        display: block !important;
    }
}



.sns__container {
    display: flex;
}

.sns__container a {
    width: 100%;
    text-align: center;
    color: #fff;
    padding: 0.5rem 0;
}

.sns__container a:hover {
    opacity: 0.6;
}

.sns__twitter {
    background: #55acee;
}

.sns__facebook {
    background: #3b5998;
}

.sns__pocket {
    background: #ef3f56;
}

.sns__line {
    background: #1dcd00;
}

.sns__hatena {
    background: #00a5de;
}


.grecaptcha-badge { visibility: hidden; }


/* ================================================================================================
//
//  TOPPAGE - SLIDE
//
// ============================================================================================== */
.swiper-container {
    width: 100%;
    max-width: 1140px;
    margin: auto;
    overflow: hidden;
}

.swiper-container .swiper-slide .img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}


/* ================================================================================================
//
//  SINGLE PAGE - 執筆者項目
//
// ============================================================================================== */
.profile-wrapper {
border: solid 3px var(--color0);
    border-radius: 3px;
    max-width: 850px;
    font-size: 14px;
}

.profile-tt{
     background:var(--color0);
    font-size: 18px;
    font-weight: bold;
}

.profile-wrapper .text-wrap {
    width: calc( 100% - 200px );
    padding-right: 4rem;
}

.profile-wrapper .text-wrap .profile-name {

}

.profile-wrapper .text-wrap .text-area {
    margin-top: 2rem;
}

#subpage .profile-wrapper .text-wrap .text-area {
    padding: 0!important;
}

.profile-wrapper .img-wrap {
    width: 200px;
}

.profile-wrapper .img-wrap .img {
    position: relative;
    padding-top: 100%;
}

.profile-wrapper .img-wrap .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.profile-wrapper .img-wrap .profile_btn {

}

.profile-wrapper .img-wrap .profile_btn span{

}

.profile-name{
    font-size: 20px;
}

.profile-img{
    max-width: 200px;
}


/* ================================================================================================
//
//  Yoast - パンくずリスト//
//
// ============================================================================================== */

#breadcrumbs{
    color: var(--color1);
}

@media (max-width: 500px) {
#breadcrumbs{
    color: var(--color1);
    font-size: 12px;
}
}

.fa-home{
    color: var(--color1) !important;
}



/* ================================================================================================
//
//  TOPページ - メインイメージスライダーのスタイリング//
//
// ============================================================================================== */

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
    color: #e0e0e0;
}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
    color: #e0e0e0;
}
.swiper-pagination-bullet-active{
    background: #212121;
}



/* ================================================================================================
//
//  share - シェアボタン single.php
//
// ============================================================================================== */

.sns__container {
    display: flex;
}

.sns__container a {
    text-decoration: none;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 2rem;
    max-width: 180px;
}

.sns__container a:hover {
    opacity: 0.6;
}

.sns__twitter {
    background: #55acee;
}

.sns__facebook {
    background: #3b5998;
}

.sns__pocket {
    background: #ef3f56;
}

.sns__line {
    background: #1dcd00;
}
/* =====ここから「このWPへの追記」==================================================*/
/*h1を非表示にする場合は使用
h1 {
	display: none;
}

@media (max-width: 500px) {
	.main_img_bg img {
		margin-top: 5px;
	}
}
*/

/*---「LINE特典：リボンの色&文字色の変更」※1262、1304も変更---------------------*/
.line-tt {
    color: #fff;
    background: #bf1a2f;
}

@media only screen and (max-width: 500px) {
	.line-tt {
		color: #fff;
		background: #bf1a2f;
	}
}

/*---「ページ内スクロールの調整」-------------------*/
#offer {
	padding-top: 30px;
    margin-top: -30px;
}


/*-----「お客様の声」-----*/
.voice_title {
	border-left: solid 5px #f68e33;
	font-size: 1.2em;
	font-weight: bold;
}

.voice_cc {
	background-color: #fff1d3;
	color: #f57c12;
	font-weight: bold;
}

/*---------------その他対応メニュー------------------*/
#taiou .btnn {
	font-size: 1.6rem;
	display:block;
    line-height: 1.3;
    position: relative;
    display: inline-block;
    padding: 2rem 4rem;
    cursor: pointer;
    letter-spacing: 0.1em;
    border-radius: 0.5rem;
    width: 100%;
    max-width: 800px;
	margin-top:-16px;
	background:#1976d2;
	box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

	@media only screen and (max-width: 500px){
#taiou .btnn {
    font-size: 20px;
    padding: 1.7rem 1rem;
	margin-top:-8px;
	}}

#taiou .fa-position-right {
    position: absolute;
    top: calc(50% - 0.5em);
    right: 1rem;
}
/*========== ここから「よくある質問」  ==========*/

/*----Q＆Aアイコン修正----*/

.qanda dd:before {
	line-height: 44px;
}

@media (max-width: 763px){
	.qanda dd:before {
		line-height: 24px;
	}
}

/*========== ここから「料金表」  ==========*/
.tableBasic01 table {
    border-collapse: collapse;
    font-size: 95%;
    border-spacing: 0;
    margin-left: auto;
    margin-right: auto;
}

.tableBasic01 table {
    border-style: solid;
    border-color: #f3f3f3;
    border-size: 1px;
    width: 100%;
}

.tableBasic01 td {
    padding: 10px;
    line-height: 2em;
}

.tableBasic01 tr {
    padding: 10px;
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 1px dotted #e1e1e1;
}

.tableBasic01 {
    padding: 8px;
	max-width: 800px;
	margin: 0 auto;
}


.tableBasic01 table th {
    background: #f4f4f4;
    text-align: center;
    padding: 16px 5px;
    border-right: 1px dotted #fff;
    border: 1px solid #ddd;
}

.tableBasic01 table td {
    background: #fff;
    text-align: center;
    padding: 10px 5px;
    border: 1px solid #ddd;
    text-align: left;
}

.taC {
    text-align: center !important;
}

.w25per {
    width: 25% !important;
}

.w50per {
    width: 50% !important;
}

@media only screen and (max-width: 991px){
.dis-none-tab {
    display: none;
}
}

/*========== ここから「お客様の声」  ==========*/
.voice_title {
    border-left: solid 5px  var(--color2);
    font-size: 1.2em;
    font-weight: bold;
}
.voice_cc {
    background-color: var(--color0);
    color: var(--color2);
    letter-spacing: -1px;
}

.voice_list p{
	margin-bottom:0 !important;
	font-size:15px;
}
/*==========　アコーディオン（症状メニュー） ==========*/
/*
<div class="cp_box">
<input id="cp01" type="checkbox" autocomplete="off"><label for="cp01"></label>
<div class="cp_container"> 
★隠すコンテンツ★
</div>
</div>
*/

.cp_box {
    position: relative;
    margin-bottom: 2em;
}

.cp_box input {
    display: none;
}

.cp_box label {
    position: absolute;
    z-index: 1;
    bottom: -10px;
    width: 100%;
	height: 100px;
    cursor: pointer;
    text-align: center;
    background: linear-gradient(to bottom, rgba(250, 252, 252, 0) 0%, rgba(250, 252, 252, 0.95) 90%);
}

.cp_box label::after {
    line-height: 2.5rem;
    position: absolute;
    z-index: 2;
    bottom: 20px;
    left: 50%;
    width: 16rem;
    font-family: FontAwesome;
	content: "施術の流れを見る";
    transform: translate(-50%, 0px);
    letter-spacing: 0.05em;
    color: rgb(255, 255, 255);
    background-color: #f68e33;
    border-radius: 20px;
}

.cp_box input:checked + label::after {
    font-family: FontAwesome;
    content:"閉じる";
}

.cp_box input:checked~.cp_container {
    height: auto;
    padding-bottom: 80px;
    transition: all 0.5s;
}

.cp_box input:checked+label {
    background: inherit;
}

.cp_box .cp_container {
    overflow: hidden;
	height: 350px;
    transition: all 0.5s;
}


@media (max-width: 480px){
.cp_box .cp_container {
    overflow: hidden;
    height: 500px;
    transition: all 0.5s;
}
}

/*「施術の流れ」余白調整（STEPコンテンツ）*/
.step_list {
	margin-bottom: 25px;
}

/*「メールフォーム」サイズ調整（プルダウン）*/
select {
    min-height: 35px;
}
/* ==============================
   PC：ヒーロー内 → 通過後に固定化（ふわっと）
   ============================== */
@media (min-width: 992px){
.fv_box.pc.is-sticky{
  position: fixed;
  top: 10px;
  left: 0;
  right: 0;
  width: 100% !important;
  padding: 10px 24px !important;
  z-index: 1000;

  background: #fff;
  box-shadow: none;
  opacity: 0;
  transform: translate3d(0, -24px, 0);

  /* ← ここは “遷移なし” にするのがポイント */
  transition: none;
}

/* 実際に見せる状態（showが付いた時）にだけ遷移を付ける */
.fv_box.pc.is-sticky.show{
  transform: translate3d(0, 0, 0);
  opacity: 1;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);

  /* ← 遷移はここに集約 */
  transition:
    transform .55s cubic-bezier(.33,.66,.66,1),
    opacity   .55s ease-out,
    box-shadow .25s ease-out;
}
  .fv_box.pc.is-sticky.show{
    transform: translate3d(0, 0, 0);   /* ← Yだけ0へ */
    opacity: 1;
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
	  top:0;
  }
  /* 内部レイアウト：ロゴ左／メニュー＋CTA右 */
  .fv_box.pc .nav-inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
	padding: 10px 190px;  
  }
  .fv_box.pc .logo-fv{ height: 48px; width: auto; }

  .fv_box.pc .menu-area{
    display: flex;
    align-items: center;
    gap: 56px;
    flex-wrap: nowrap;
  }

  .fv_box.pc .desktop-nav{
    display: flex;
    align-items: center;
    gap: 56px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .fv_box.pc .desktop-nav li{ margin: 0; padding: 0; }

  /* 二段表記（状態で色を切替） */
  .desktop-nav a{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    line-height: 1.2;
  }

  /* 初期（ヒーロー上） */
  .fv_box.pc:not(.is-sticky) .desktop-nav .ja{ font-size:16px; font-weight:700; color:#333; }
  .fv_box.pc:not(.is-sticky) .desktop-nav .en{ font-size:12px; font-weight:500; color:#777777; letter-spacing:.05em; margin-top:2px; }

  /* 固定後（白ヘッダー上） */
  .fv_box.pc.is-sticky .desktop-nav .ja{ color:#646162; }
  .fv_box.pc.is-sticky .desktop-nav .en{ color:#777; font-weight: 500; font-size: 12px;}

  /* hoverは両方まとめて */
  .desktop-nav a:hover .ja,
  .desktop-nav a:hover .en{ color:#ff7a00;}

  /* CTAボタン */
  .fv_box.pc .cta-area{ flex-shrink: 0; }
  .fv_box.pc .btn-contact,
  .fv_box.pc .btn-cta{
    display:inline-block; padding:10px 16px; border-radius:999px;
    font-weight:800; letter-spacing:.02em; color:#fff; text-decoration:none; white-space:nowrap;
    background: linear-gradient(90deg,#ff7a00,#ff4d00);
    box-shadow: 0 6px 16px rgba(255,90,0,.35);
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  }
  .fv_box.pc .btn-contact:hover,
  .fv_box.pc .btn-cta:hover{ transform: translateY(-1px); box-shadow: 0 8px 20px rgba(255,90,0,.45); }
  .fv_box.pc .btn-contact:active,
  .fv_box.pc .btn-cta:active{ transform:none; opacity:.95; }

  /* SP用UIはPCで非表示 */
  .fv_box.pc .mobile-nav,
  .fv_box.pc .menu-icon-container{ display: none !important; }

  .fv_box.pc .mb-3{ margin-bottom: 0 !important; }
}

/* SP/タブレットはこのPCナビを非表示（従来ヘッダーを使用） */
@media (max-width: 991.98px){
  .fv_box.pc{ display: none; }
}

/* グローバル干渉回避 */
.desktop-nav li a{ color:#646162; font-weight:600;  text-decoration:none;}


/* ===== 基本設定（色・余白・フォント） ===== */
:root{
  --c-grad-a:#4fa7e7;
  --c-grad-b:#1e77d7;
  --c-white:#fff;
  --c-text:#0f172a;
  --c-muted:#6b7280;
  --c-pill:#ff8a3d;   /* オレンジ */
  --shadow-lg:0 18px 48px rgba(0,0,0,.18);
  --shadow-md:0 10px 24px rgba(0,0,0,.12);
  --radius:18px;
  --wrap: min(1200px, 92vw);
}

/* ===== ヒーロー全体 ===== */
.cta-hero{
  background: linear-gradient(115deg, #e9af19 0%, #fc560d 100%);	
  position: relative;
  padding: clamp(28px, 4vw, 48px) 8px;
  overflow: hidden;
}
/* 背景パターン（円形の連続） */
.cta-hero::before{
  content:"";
  position:absolute; inset:-20% -10% -10% -10%;
  background:
    radial-gradient(circle at 12px 12px, rgba(255,255,255,.12) 12px, transparent 13px) 0 0/48px 48px;
  opacity:.45;
  pointer-events:none;
}

.cta-hero__inner{
  width: var(--wrap);
  margin: 0 auto;
  align-items: center;
}

/* ===== 基本トークン ===== */
:root{
  --wrap: min(1120px, 92vw);
  --c-text:#0f172a;
  --c-muted:#606b85;
  --c-blue:#2f7dd1;
  --c-blue-soft:#e6effd;
  --c-border:#d9dde6;
  --c-green:#13c36b;
  --c-green-d:#0ea85c;
  --c-orange:#ff8a3d;
  --radius:16px;
  --shadow:0 8px 24px rgba(0,0,0,.08);
}

/* ===== セクション全体 ===== */
.exam-consult{ padding: clamp(28px, 4vw, 56px) 0; color: #666465; }
.ec__inner{ width: var(--wrap); margin: 0 auto;  max-width: 860px;}

/* 見出し帯 */
.ec__head{ position: relative; text-align: center; padding: 0 24px 10px; }
.ec__teacher{
  width: 88px; height: auto; position: absolute; top: -6px;
}
.ec__teacher--left{ left: 0; }
.ec__teacher--right{ right: 0; }
.ec__eyebrow{
  color: #ff7a00; font-weight: 800; letter-spacing:.08em; margin:.6rem 0 .2rem;
}
.ec__title{
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 900; margin: .2rem 0 .6rem;
}
.ec__desc{
  color: var(--c-muted);
  margin: 0 auto 22px; max-width: 78ch; line-height: 1.8;
}

/* ===== 3ステップ ===== */
.ec-steps{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.8vw, 28px);
  margin: 18px 0 28px; padding: 0 10px;
}
.ec-step{
    position: relative;
    background: #fff;
    border: 2px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px 18px 16px;
    text-align: center;
    min-height: 250px;
}
/* STEPバッジ */
.ec-step__badge{
  position: absolute; left: 14px; top: -12px;
  background:#3982B2; color:#fff; font-weight: 800;
  padding: 6px 12px; border-radius: 10px; font-size: 13px;
}
.ec-step__art img{ width: 120px; height: auto; }
/* キャプション */
.ec-step__text{
    margin: 12px 0 0;
    font-weight: 700;
    line-height: 1.6;
    font-size: 15px;
}
/* カード間の矢印（PCのみ） */
@media (min-width: 900px){
  .ec-step:not(:last-child)::after{
    content:""; position: absolute; right: -18px; top: 50%; transform: translateY(-50%);
    width: 0; height: 0; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 14px solid #8ec0ff;
    filter: drop-shadow(0 2px 0 rgba(0,0,0,.06));
  }
}

/* 吹き出し（STEP3） */
.ec-step__balloon{
  position:absolute; right:-6px; top:-12px;
  background: var(--c-orange); color:#fff; font-weight: 800; font-size: 12px;
  padding: 10px 12px; border-radius: 10px; line-height:1.35;
}
.ec-step__balloon::after{
  content:""; position:absolute; left:10px; bottom:-8px;
  border:8px solid transparent; border-top-color: var(--c-orange);
}

/* ===== 緑のピルCTA ===== */
.ec-cta{
  --h: 76px;
  display:flex; align-items:center; justify-content:center;
  gap: clamp(8px, 2vw, 16px);
  height: var(--h);
  border-radius: calc(var(--h)/2);
  background: linear-gradient(90deg, var(--c-green), var(--c-green-d));
  color: #fff; text-decoration:none; font-weight: 900; font-size: clamp(18px, 2.6vw, 22px);
  box-shadow: 0 12px 28px rgba(19,195,107,.35);
  padding: 8px 22px 8px 18px;
  width: min(760px, 96%);
  margin: 6px auto 0;
  position: relative; overflow: hidden;
}
.ec-cta:hover{ filter: brightness(1.03); transform: translateY(-1px); transition:.15s ease; }

.ec-cta__left{ display:flex; align-items:center; gap: 10px; position: relative; }
.ec-cta__circle{
  width: 72px; height: 72px; border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, #ffd166, #ffb347);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
}
.ec-cta__phone{
  position: absolute; left: 10px; width: 40px; height: auto;
}
.ec-cta__tag{
  position: absolute; left: 70px; top: 50%; transform: translateY(-50%);
  background:#fff; color:#333; font-weight:700; font-size:12px;
  border-radius: 6px; padding: 4px 8px; box-shadow: 0 4px 14px rgba(0,0,0,.12);
}

.ec-cta__text{ text-align:center; }
.ec-cta__go{ font-size: 22px; margin-left: auto; margin-right: 8px; }

/* ===== レスポンシブ ===== */
@media (max-width: 900px){
  .ec__teacher{ display:none; }
  .ec-steps{ grid-template-columns: 1fr; }
  .ec-step{ min-height: auto; }
  .ec-cta{ --h: 70px; }
}
@media (max-width: 520px){
  .ec__desc{ padding: 0 6px; }
  .ec-step__art img{ width: 100px; }
  .ec-cta{ --h: 64px; }
  .ec-cta__circle{ width: 64px; height: 64px; }
  .ec-cta__phone{ left: 8px; width: 36px; }
  .ec-cta__tag{ left: 64px; font-size:11px; }
}

/* === LINE Button (#06C755) === */
:root { --line:#06C755; }

.btn-line{
    --h: 81px;
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    height: var(--h);
    padding: 0 18px;
    border-radius: 999px;
    background: linear-gradient(to right,  #32d173 0%,#06c755 100%);
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1;
    box-shadow: 0 10px 20px rgba(6, 199, 85, .25);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
    min-width: 420px;
}
.btn-line:hover{ transform:translateY(-1px); box-shadow:0 14px 26px rgba(6,199,85,.32); filter:brightness(1.03); }
.btn-line:active{ transform:none; filter:brightness(.97); }
.btn-line:focus-visible{ outline:3px solid rgba(6,199,85,.35); outline-offset:2px; }

.btn-line__icon{ display:inline-grid; place-items:center; width:1.75em; height:1.75em; font-size: 42px;}
.btn-line__icon i{ font-size:1.15em; color:#fff; line-height:1; }
.btn-line__text{ white-space:nowrap; font-size: 26px;}

/* サイズ・配置バリエーション */
.btn-line--lg{ --h:56px; padding:0 22px; font-size:1.06rem; }
.btn-line--sm{ --h:40px; padding:0 14px; font-size:.92rem; }
.btn-line--block{ display:flex; justify-content:center; width:100%; }

/* 白抜き版（背景が濃い場所用） */
.btn-line--outline{
  background:#fff; color:var(--line); border:2px solid var(--line);
  box-shadow:none;
}
.btn-line--outline .btn-line__icon i{ color:var(--line); }

h2{
    font-weight:700 !important;
}

h2.top{
	color:#333;
	font-size:56px;
	line-height: 1.5;
}

@media (max-width: 763px) {
h2.top{
	font-size:32px !important;
}	
}

h2.top span{
letter-spacing: 10px;
    display: block;
    font-weight: 400;
    display: block;
    font-size: 16px;
    padding-top: 9px;
	font-family: 'BIZ UDPGothic', sans-serif !important;
}

@media only screen and (max-width:763px) {
h2.top span {
    font-size: 10px;
	letter-spacing:4px;
}	
}

.about_tt{
	max-width:860px;
	width:100%;
}

.about_tt p{
font-size:20px;
    z-index: 5;
    position: relative;
	text-align:center;
}

@media only screen and (max-width:763px) {
.about_tt p{
font-size:16px;
}	
}


/* ===== MyWay Courses: scoped by .mwx- ===== */
.mwx-courses{
    --mwx-blue: #2b5fd6;
    --mwx-blue-weak: #e8f1ff;
    --mwx-text: #222;
    --mwx-muted: #6b7280;
    --mwx-btn: #F4810E;
    --mwx-btn-h: #db8b00;
    --mwx-radius: 18px;
    --mwx-shadow: 0 10px 24px rgba(20, 40, 100, .12);
    font-family: inherit;
    color: var(--mwx-text);
    max-width: 1500px;
    margin: 0 auto;
    padding:40px 32px 56px;
    position: relative;
    isolation: isolate;
}

/* ヘッダ（「だから」バッジ＋見出し） */
.mwx-courses__head{
  text-align:center;
  margin-bottom:58px;
}
.mwx-courses__label{
  display:inline-block;
  background:#fff;
  border:2px solid #f68e33;
  color:#f68e33;
  border-radius:999px;
  padding:6px 18px;
  font-weight:700;
  line-height:1;
  position:relative;
  top:14px;
	margin-bottom: 16px;
}
.mwx-courses__title{
  margin:10px auto 50px;
  font-size:clamp(20px,2.6vw,2.5rem);
  font-weight:800;
  letter-spacing:.02em;
    line-height: 1.5;	
}

/* カード並び */
.mwx-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin-top:18px;
}
@media (max-width: 980px){
  .mwx-cards{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 640px){
  .mwx-cards{ grid-template-columns:1fr; }
}

/* カード */
.mwx-card{
  background:#fff;
  border-radius:10px;
  box-shadow:var(--mwx-shadow);
  overflow:hidden;
  position:relative;
}
.mwx-card__media{
  margin:0;
  position:relative;
}
.mwx-card__media img{
  width:100%;
  height:320px;
  object-fit:cover;
  display:block;
}
@media (max-width: 763px){
.mwx-card__media img {
    height: 200px;
}
}


.mwx-card__badge{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -10px;
    background: #fff;
    border-radius: 16px;
    padding: 10px 18px 10px;
    font-weight: 800;
    color: #333;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
    display: flex;
    align-items: center;
    gap: .5em;
    font-size: 1.2rem;
    white-space: nowrap;
}
.mwx-card__icon{ color:#ffc107; }

/* 本文 */
.mwx-card__body{
  padding:28px 18px 20px; /* バッジ分の上余白を確保 */
  text-align:center;
}
.mwx-card__price{
  margin:0 0 14px;
  color:var(--mwx-muted);
  font-weight:600;
  font-size:15px;
}
.mwx-card__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:160px;
  height:44px;
  padding:0 18px;
  border-radius:999px;
  background:var(--mwx-btn);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  transition:transform .05s ease, background-color .2s ease, box-shadow .2s ease;
}
.mwx-card__btn:hover{
  background:var(--mwx-btn-h);
  transform:translateY(-1px);
}

.mwx-card__body a:hover{
text-decoration:none;
	color:#fff;
}

/* ====== Zoom on hover & card-wide clickable ====== */

/* カード全体をクリック可能にする土台 */
.mwx-card{
  position: relative;      /* ← stretched-linkの基準。必須 */
  overflow: hidden;        /* ズーム時にはみ出す画像を隠す */
  transition: transform .2s ease, box-shadow .2s ease;
}
.mwx-card:hover,
.mwx-card:focus-within{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,.12);
}

/* 画像ズーム（枠内でトリミング） */
.mwx-card__media{
  overflow: hidden;                        /* 念のため */
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.mwx-card__media img{
  transform: scale(1);
  transition: transform .6s cubic-bezier(.2,.6,.2,1);
  will-change: transform;
}
.mwx-card:hover .mwx-card__media img,
.mwx-card:focus-within .mwx-card__media img{
  transform: scale(1.08);                  /* 拡大率はお好みで */
}

/* Bootstrap の stretched-link がカードの外に広がらないよう保険 */
.mwx-card .stretched-link::after{
  border-radius: inherit;
}

/* アニメーションが苦手な利用者への配慮 */
@media (prefers-reduced-motion: reduce){
  .mwx-card,
  .mwx-card__media img{
    transition: none;
  }
}



.Paper_v2 {
	background:#fff;
  background-image:
    repeating-linear-gradient(to bottom,
      transparent 25px,
      rgba(0, 0, 0, 0.04) 26px,  rgba(0, 0, 0, 0.04) 26px,
      transparent 27px,  transparent 51px, 
      rgba(0, 0, 0, 0.04) 52px,  rgba(0, 0, 0, 0.04) 52px,
      transparent 53px,  transparent 77px, 
      rgba(0, 0, 0, 0.04) 78px,  rgba(0, 0, 0, 0.04) 78px,
      transparent 79px,  transparent 103px, 
      rgba(0, 0, 0, 0.04) 104px,  rgba(0, 0, 0, 0.04) 104px,
      transparent 105px,  transparent 129px, 
      rgba(0, 0, 0, 0.04) 130px,  rgba(0, 0, 0, 0.04) 130px),

    repeating-linear-gradient(to right,
      transparent 25px,
      rgba(0, 0, 0, 0.04) 26px,  rgba(0, 0, 0, 0.04) 26px,
      transparent 27px,  transparent 51px, 
      rgba(0, 0, 0, 0.04) 52px,  rgba(0, 0, 0, 0.04) 52px,
      transparent 53px,  transparent 77px, 
      rgba(0, 0, 0, 0.04) 78px,  rgba(0, 0, 0, 0.04) 78px,
      transparent 79px,  transparent 103px, 
      rgba(0, 0, 0, 0.04) 104px,  rgba(0, 0, 0, 0.04) 104px,
      transparent 105px,  transparent 129px, 
      rgba(0, 0, 0, 0.04) 130px,  rgba(0, 0, 0, 0.04) 130px);
}

/* ===== ABOUT HERO (scoped) ===== */
.about-hero{
  --ah-orange: #f28b17;           /* 基調オレンジ */
  --ah-orange-2:#ffab3b;          /* グラデ薄め */
  --ah-text:   #1a1a1a;
  --ah-white:  #fff;
  --ah-rad:    22px;

  position: relative;
  padding:140px 0 72px;
  color: var(--ah-text);
  overflow: hidden;

}

@media (max-width: 763px){
.about-hero{
  padding:40px 0 0px;
}	
}

/* 背景のオレンジ面（ページ端～端まで） */
.about-hero::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, #F4810E 0%, #f79f47 100%);
  opacity:.92;
  z-index:-2;
}

/* 左側の縦大見出し “ABOUT US”（背景の上にうっすら） */
.about-hero::after{
  content: "ABOUT MYWAY";
    position: absolute;
    left: 46px;
    top: 12%;
    transform: rotate(90deg) translateY(-50%);
    transform-origin: left top;
    font-weight: 900;
    letter-spacing: .06em;
    font-size: clamp(64px, 16vw, 160px);
    color: #fff;
    opacity: .09;
    z-index: -1;
    white-space: nowrap;
    font-size: 100px;
}



/* ---- レイアウト ---- */
.about-hero__row{ position:relative; }

/* 写真フレーム（白い縁＋影） */
.about-hero__photo-wrap{
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.about-hero__photo{
  width:100%;
  border-radius: calc(var(--ah-rad) - 6px);
  display:block;
}

/* 右側コピー */
.about-hero__copy{
  margin-left: auto;
  margin-right: auto;
}

/* 白い“ふせん”風の帯 */
.about-hero__ribbon{
  display:inline-block;

  color:#333;
  font-weight: 800;
  font-size: clamp(18px, 2.1vw, 22px);
  line-height: 1.55;
  padding: 10px 16px;
  margin-bottom: 10px;
}


@media (max-width: 763px){
.about-hero__ribbon {
    display: flex;
    color: #333;
    font-weight: 800;
    font-size: clamp(20px, 2.1vw, 28px);
    line-height: 1;
    padding: 10px 16px;
    margin-bottom: 10px;
    text-align: center;
}
}

.about-hero__ribbon--accent{
  /* 強調帯だけ少し濃い影 */
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

/* 補足文 */
.about-hero__lead{
  color: #fff;
  margin:0px 0px 24px;
  line-height: 1.9;
  text-shadow: 0 1px 0 rgba(0,0,0,.08);
}

/* 丸カプセルボタン */
.about-hero__btn{
  display:inline-flex; align-items:center; gap:12px;
  background:#fff;
  border-radius: 999px;
  padding: 14px 24px;
  font-weight: 800;
  color:#222;
  text-decoration:none;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  transition: transform .08s ease, box-shadow .2s ease;
}
.about-hero__btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(0,0,0,.22);
}
.about-hero__btn-icon{
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--ah-orange);
  position: relative; flex: 0 0 32px;
}
.about-hero__btn-icon::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, #fff 0 0) center/40% 2px no-repeat,
    linear-gradient(45deg, #fff 0 0) 56% 48%/22% 2px no-repeat,
    linear-gradient(-45deg,#fff 0 0) 56% 52%/22% 2px no-repeat;
  border-radius:50%;
}

/* レスポンシブ微調整 */
@media (min-width: 992px){
  .about-hero{ padding:140px 0 96px; }
  .about-hero__photo-wrap{ margin-left: 24px; }
  .about-hero__copy{  max-width: 560px;  text-align: left;
  max-width: 600px;   /* 調整可 */
  margin-left: 0;     /* 左に寄せる */
  margin-right: auto; /* 右側に余白 */ 
	  padding:0px 16px;
	}
}
@media (max-width: 575.98px){
  .about-hero__photo-wrap{ padding:12px; }
}

.about-hero__video-vertical {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius:3px;
    margin: auto;
    max-width: 560px;
	box-shadow: 0 6px 16px rgba(255, 90, 0, .35);
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

@media (max-width: 763px){
.about-hero__video-vertical {
    position: relative;
    width: 90%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 3px;
    margin: auto;
    max-width: 560px;
    box-shadow: 0 6px 16px rgba(255, 90, 0, .35);
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}	
}

.about-hero__video-vertical video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover; /* 中央をトリミングして縦長表示 */
}

.in{
    background: #fff;
    display: inline;
    padding: 10px 10px;
    line-height: 1.7;
    letter-spacing: 1.7px;
    border-radius: 1px;
}

@media (max-width: 763px){
.in {
	background:none;
    display: inline;
    padding: 10px 10px;
    line-height: 1.7;
    letter-spacing: 1.7px;
    border-radius: 1px;
    color: #fff;
}	
}

.about-hero__ribbon span{
color:#F4810E;
}


@media (max-width: 763px){

.about-hero__ribbon span{
color:#fff;
}
}

.tokutyou_tt{
font-size: 3.8rem;
}

.tokutyou_size{
font-size:1.8rem;
line-height:1.5;	
}

  /* 画像の角丸・シャドウ・ホバー */
  .row .col img { box-shadow: 0 8px 24px rgba(15, 23, 42, .06); transition: transform .25s ease; }
  .row .col img:hover { transform: translateY(-2px); }
  /* 段落の可読性 */
.row .col p { line-height: 1.9; color:#334155; }

.fw-bold span{
font-size:2.2rem;
	color:#f4810e;
}
.orange_box {
    background-image: url(/wp-content/uploads/orange_bg.jpg);
    background-size: cover;     /* 埋め尽くす */
    background-position: center;
    border-radius: 20px;
    padding: 5%;                /* 中身の余白 */
    position: relative;
}
@media (max-width: 763px){
.orange_box {
    background-image: url(/wp-content/uploads/orange_bg.jpg);
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    padding:8%;
    position: relative;
    width:100%;
    margin: 0 auto 20px;
	min-height:200px;
}	
}


.orangebox_textA {
    font-size: clamp(1.2rem, 2vw, 2rem);
    font-weight: 500;
    color: #fff;
    line-height: 1.5;	
}

.orangebox_textB {
    font-size: clamp(1.8rem, 3vw, 2.3rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.5;	
}

@media (max-width: 763px){
.orangebox_textB {
    font-size: clamp(1.5rem, 3vw, 2.8rem);
	}
}

.orangebox_textC {
    font-size: clamp(1.2rem, 2vw, 2rem);
    font-weight: 500;
    color: #fff;
    line-height: 1.5;	
}

.kousshi_tt{
    font-size: clamp(20px, 2.6vw, 34px);
    font-weight: 600;	
	
}

.reason_h3 {
    font-size:32px !important;
    text-align: center;
} 

.reason-con{
	display: flex; /* flexbox */
	flex-wrap: wrap; /* 折返し指定 */
	gap:10px;
}

.reason-child{
    width: 47%;
    padding: 8px 42px;
    background: #fff;
    border-radius: 10px;
}

@media (max-width: 763px){
.reason-child {
    width: 100%;
	    padding: 8px 16px;
}	
}

.reason_number_tt{
    position: relative;
    top: -20px;
    line-height: .7;
    font-size: 56px;
    font-weight: 600;
    letter-spacing: 2.5px;
    color: #fff;
    text-shadow: 2px ;
		text-shadow: 2px 2px 0 #f7a238, -2px -2px 0 #f7a238, -2px 2px 0 #f7a238, 2px -2px 0 #f7a238, 0px 2px 0 #f7a238, 0 -2px 0 #f7a238, -2px 0 0 #f7a238, 2px 0 0 #f7a238;
}


.policy {
  background: #ffffff;
  border: double 5px #EEEEEE;
  border-radius: 20px;
	padding:40px 60px;
  text-align: center;
  background-image: repeating-linear-gradient(to bottom,
      transparent 25px,
      rgba(0, 0, 0, 0.04) 26px,  rgba(0, 0, 0, 0.04) 26px,
      transparent 27px,  transparent 51px, 
      rgba(0, 0, 0, 0.04) 52px,  rgba(0, 0, 0, 0.04) 52px,
      transparent 53px,  transparent 77px, 
      rgba(0, 0, 0, 0.04) 78px,  rgba(0, 0, 0, 0.04) 78px,
      transparent 79px,  transparent 103px, 
      rgba(0, 0, 0, 0.04) 104px,  rgba(0, 0, 0, 0.04) 104px,
      transparent 105px,  transparent 129px, 
      rgba(0, 0, 0, 0.04) 130px,  rgba(0, 0, 0, 0.04) 130px),

    repeating-linear-gradient(to right,
      transparent 25px,
      rgba(0, 0, 0, 0.04) 26px,  rgba(0, 0, 0, 0.04) 26px,
      transparent 27px,  transparent 51px, 
      rgba(0, 0, 0, 0.04) 52px,  rgba(0, 0, 0, 0.04) 52px,
      transparent 53px,  transparent 77px, 
      rgba(0, 0, 0, 0.04) 78px,  rgba(0, 0, 0, 0.04) 78px,
      transparent 79px,  transparent 103px, 
      rgba(0, 0, 0, 0.04) 104px,  rgba(0, 0, 0, 0.04) 104px,
      transparent 105px,  transparent 129px, 
      rgba(0, 0, 0, 0.04) 130px,  rgba(0, 0, 0, 0.04) 130px);
    z-index: 2;
    position: relative;	
}
.policy-title {
  font-size: 2.5rem;
  margin-bottom: 10px;
	color:#333;
}
.policy-lead {
  font-size: 1.1rem;
  margin-bottom: 40px;
  color: #555;
}
.policy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
  gap:100px;
}
.policy-item {
    border-radius: 12px;
    padding: 40px 32px;
    background:#2d82bc;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.icon-circle {
width: 200px;
    height: 200px;
    line-height: 80px;
    margin: 0 auto 15px;
    border-radius: 50%;
    background:#f9f8f3;
    font-size: 2rem;
}
.policy-item h3 {
  font-size: 1.6rem;
  margin-bottom: 10px;
color:#FFEB3B;	
}
.policy-item p {
  font-size: 0.95rem;
    margin-bottom: 0;	
}

@media (max-width: 768px) {
.policy {
	padding:20px 20px;
	}
	
	.policy-grid {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
.policy-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap:4px;
}
  .icon-circle {
    width: 130px;
    height: 130px;
  }

  .icon-circle img {
    width: 100%;
    height: auto;
  }
	.policy-item {
    border-radius: 12px;
    padding: 10px;
}
.policy-item h3 {
	font-size: 1rem !important;
  margin-bottom: 10px;
}	
	.policy-lead {
		margin-bottom: 20px;
}
	
.tokutyou_tt {
    font-size: 1.8rem !important;
}	
.tokutyou_size {
    font-size: 1.3rem;
    line-height: 1.5;
}	
}


.line_bg{
    position: absolute;
	top:0px;
    transform: rotate(45deg);
	left: -32%;
}

.line_bg img{
	max-width:300px;
}



.line_bg2{
    position: absolute;
    top:378px;
    transform: rotate(-135deg);
    right: -32%;
}

.line_bg2 img{
	max-width:300px;
}



.line_bg3{
position: absolute;
    bottom: 60px;
    transform: rotate(45deg);
	left: -32%;
}

.line_bg3 img{
	max-width:300px;
}

.cp_arrows {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
	top:-30px;
}
.cp_arrows .cp_arrow {/*矢印を配置するベースの設定*/
  position: absolute;
  width: 30px;
  height: 7px;
  opacity: 0;/*スタートは透明*/
  transform: scale(0.5);/*スタートは30%に縮小*/
  animation: arrow-move07 3s ease-out infinite;
}
.cp_arrows .cp_arrow:first-child {/*1秒ずらしてアニメーション*/
  animation: arrow-move07 3s ease-out 1s infinite;
}
.cp_arrows .cp_arrow:nth-child(2) {/*2秒ずらしてアニメーション*/
  animation: arrow-move07 3s ease-out 2s infinite;
}
.cp_arrows .cp_arrow:before,
.cp_arrows .cp_arrow:after {/*矢印全体の設定*/
  position: absolute;
  content: '';
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 100%;
  background:#f4810e;
  border-radius: 2px;
}
.cp_arrows .cp_arrow:before {/*矢印左の線の位置と傾斜*/
  left: 1px;
  transform: skewY(30deg);
}
.cp_arrows .cp_arrow:after {/*矢印左の線の位置と傾斜*/
  right: 1px;
  transform: skewY(-30deg);
}
@keyframes arrow-move07 {
   25% { opacity: 0.6;}
   43% { transform: translateY(1em); opacity: 0.8;}
   62% { transform: translateY(2em); opacity: 1;}
  100% { transform: translateY(3em) scale(0.5); opacity: 0;}
}

.chara1{
    max-width: 180px;
    position: absolute;
    right: -20px;
    top:40%;	
}

.under_bar {
    position: relative;
    padding-bottom:8px;
    text-align: center;
}

.under_bar:before {
    position: absolute;
    bottom: -10px;
    left: calc(50% - 30px);
    width: 60px;
    height: 5px;
    content: '';
    border-radius: 3px;
    background:#f4810e;
}

.h2_sub_title{
    font-size: 2rem;	
}
.con_btn {
  display: flex;
  justify-content: flex-end; /* 右寄せ */
	margin-top:42px;
}
@media (max-width: 763px){
.h2_sub_title {
    font-size: 1.5rem;
    letter-spacing: 0;
}
.con_btn {
    display: flex
;
    justify-content: center;
    margin-top: 26px;
}	
	
}

.con_btn a{
display: inline-block;
    padding: 10px 16px;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: .02em;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
    background: #fff;
    border: solid 1px;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
    min-width:320px;
    text-align: center;
}


.con_btn a:hover{
color:#fff;
	text-decoration:none;
        background: linear-gradient(90deg, #ff7a00, #ff4d00);	
}

.koushi_prof{
	position:absolute;
	bottom:16px;
	background: rgb(255 255 255 / 90%);
	color:#333;
	padding:4px 8px;
	line-height:1.5;
	font-size:14px;
}

@media (max-width: 763px){
.koushi_prof{
	font-size:10px;
}
}

.message-section {
  position: relative;
  background: #fff; /* セクション背景色 */
  overflow: hidden;
}

/* 上にストライプ区切りを重ねる */
.message-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
	height:40px; /* ストライプの高さ */
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 150, 100, 0.1),  /* ストライプ色 */
    rgba(255, 150, 100, 0.1) 4px,  /* ← 細く */
    transparent 4px,
    transparent 8px            /* ← 間隔も細く */
  );
  z-index: 1;
}


/* セクションの中身はストライプの上に表示させる */
.message-section > .container {
  position: relative;
  z-index: 2;
}
.policy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
}

@media (max-width: 763px){
.policy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0.8rem;
}
	
}

/* 画像付きのアイテム */
.p-strItem.has-img .p-strItem__img {
  position: relative;
}

.p-strItem__img img {
  width: 100%;
  height: auto;
  display: block;
}

/* ボックスの共通デザイン */
.p-strItemColorbox {
  background: #ffeaea;
  padding: 1.5rem;
  position: relative;
}

/* 画像に重ねるとき */
.p-strItem.has-img .p-strItemColorbox {
  position: absolute;
  bottom: -20px; /* 写真の下にはみ出す */
  right: -10px;  /* 少し右にはみ出す */
  max-width: 80%;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* 数字の装飾 */
.p-strItemColorbox__number {
  position: absolute;
  bottom: 10px;
  right: 15px;
  font-size: 3rem;
  font-weight: bold;
  color: rgba(227, 91, 91, 0.2);
}

.p-strItemColorbox__title {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 1rem;
  color: #e35b5b;
}

.p-strItemColorbox__text {
  font-size: 0.95rem;
  line-height: 1.6;
}

.floating-menu {
  position: fixed; /* 画面に固定する */
  bottom: 0; /* 画面下部に配置 */
  left: 0;
  width: 100%; /* 全幅を使用 */
  display: flex; /* 子要素を横並びにする */
  justify-content: space-around; /* 均等なスペースで配置 */
  align-items: center; /* 垂直方向の中央揃え */
  background-color: #e0f2f7; /* 背景色を設定 */
  border-top: 1px solid #b3e5fc; /* 上部に境界線 */
  padding: 10px 0; /* 上下の余白 */
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* 上に影をつける */
  z-index: 1000; /* 他の要素より手前に表示 */
}

.menu-item {
  display: flex; /* アイコンとテキストを縦並びにする */
  flex-direction: column;
  align-items: center; /* 垂直方向の中央揃え */
  text-decoration: none; /* 下線をなくす */
  color: #0d47a1; /* テキスト色 */
  font-size: 12px;
  text-align: center;
  flex-grow: 1; /* 各項目が均等に幅を占める */
  padding: 5px 0;
}

.icon-wrapper {
  width: 48px; /* アイコンの幅 */
  height: 48px; /* アイコンの高さ */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 5px; /* アイコンとテキストの間の余白 */
}

.icon-wrapper img {
  width: 100%;
  height: auto;
}

.text {
  /* テキストのスタイル */
  font-size: 0.8em;
  font-weight: bold;
}

.page-heading {
		color:#fff;
    width: 100%;
    height: 231px;
    position: relative;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
	background-image: url(/wp-content/uploads/aisatsu_head_bg.jpg);
	  display: flex;
  justify-content: center;
  align-items: center;
font-size: 42px;
    font-weight: bold;
}

/*========= タイピング ===============*/

.TextTyping span {
  display: none;
}

/*文字列後ろの線の設定*/
.TextTyping::after {
  content: "|";
  animation: typinganime .8s ease infinite;
}

@keyframes typinganime{
  from{opacity:0}
  to{opacity:1}
}

/*----------- company-message-section ----------*/
.company-message-section {
  margin: 0 0 0px;
  position: relative;
	padding:0 16px;

  > p {
    img {
      height: 176px;
      width: auto;
    }
  }
}

@media (max-width: 768px) {
.company-message-section {
  margin: 0 0 40px;
  position: relative;
	padding:0 16px;

  > p {
    img {
      height:auto;
      width:60%;
    }
  }
}
}


.message-decoration {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;

  > div {
    position: absolute;

    &.primary-op {
      opacity: .08;
    }
    &.secondary-op {
      opacity: .28;
    }
    &.tertiary-op {
      opacity: .12;
    }
  }
  .deco-box.primary-op {
    width: calc(1vw * (277 / 13.66));
    height: calc(1vw * (291 / 13.66));
    top: -4.6vw;
    right: 1.8%;
  }
  .deco-box.secondary-op {
    width: calc(1vw * (274 / 13.66));
    height: calc(1vw * (274 / 13.66));
    top: 37.5vw;
    left: 0;
  }
  .deco-box.tertiary-op {
    width: calc(1vw * (162 / 13.66));
    height: calc(1vw * (162 / 13.66));
    bottom: -3.2vw;
    right: 8%;
  }
}

.message-content {
  @extend %sitewidth;
  margin:42px auto 0;
  position: relative;

  h3 {
    margin: 68px 0 36px;
  }
}

.message-content-title {
    position: absolute;
    right: 60px;
    top: -140px;
    background-color: #fff;
    padding: 20px 24px;
    width: 112px;
    line-height: 1.2;

  p {
    margin: 0 0 0 8px;
  }
}


.message-header-image {
  position: relative;

  .text-overlay {
    position: absolute;
    left: 10%;
    bottom: 36%;

    p {
      color: #333;
      line-height: 1;
      font-size: 1.68rem;

      &:nth-child(2) {
        font-size: 2.8rem;
        font-weight: 700;
        line-height: 1.8;
      }
    }
  }

}
@media (max-width: 768px) {
.message-content {
  margin:24px auto 0;
	}
}

.section-title{
	font-size:32px;
	font-weight:bold;
}
.vertical-text{
	writing-mode: vertical-rl;
	    writing-mode: vertical-rl;
    display: inline-block;
}

.vision_tt1{
    font-size:80px;
    font-family: 'Noto Sans JP', sans-serif;
	font-weight: 800;
	letter-spacing:3px;
	line-height:1.2;
}

.vision_tt1_sub{
    font-size: 24px;
    display: block;
    letter-spacing: 0;
    margin-bottom: -6px;
    font-weight: 600;
    color: #7f7f7f;
}

.vision_tt2{
    color: #7f7f7f;
	font-size: 40px;
    font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
	letter-spacing:5px;
	line-height:1.5;
}

@media (max-width: 768px) {
.vision_tt1 {
    font-size: 36px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 800;
    letter-spacing:4px;
    line-height: 1.3;
	color: #333;
}	
.vision_tt2 {
    font-size: 23px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    letter-spacing: -2px;
    line-height: 1.4;
}	
}

      /* カスタムCSS */
        .feature-card {
            background-color:#fff; /* 背景の薄いグレー */
            padding: 30px 20px;
            border-radius: 5px;
            height: 100%; /* カードの高さを揃えるために */
        }
        
        .point-number {
            font-size: 24px;
            font-weight: bold;
            display: inline-block;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-radius: 50%; /* 円形 */
            color: #fff;
            margin-right: 10px;
        }

        /* Point 1 のスタイル */
        .point-1 .point-number {
            background-color:#2B81FA; /* オレンジ */
        }
        .point-1 .point-text {
            color:#2B81FA;
            font-weight: bold;
            font-size: 1.25rem;
            display: inline-block;
        }
        
        /* Point 2 のスタイル */
        .point-2 .point-number {
            background-color:#2B81FA; /* やや薄めのオレンジ/黄色 */
        }
        .point-2 .point-text {
            color: #2B81FA;
            font-weight: bold;
            font-size: 1.25rem;
            display: inline-block;
        }

        /* アイコンのコンテナ (画像は仮の代替として使用) */
        .icon-container {
            text-align: center;
            margin: 20px 0;
        }

        /* テキストのフォント調整 */
        .card-body-text {
            font-size: 16px;
            line-height: 1.8;
            color: #555;
        }
        
        /* アイコン（画像）のサイズ調整 */
        .icon-img {
            max-width: 120px;
            height: auto;
        }


.element_head{
	position:absolute;
	top:0%;
	left:36%;
}

.element_head_h2{
text-align: center;
    color: #fff;
    font-size: 3em;
    background: #8dc34b;
    padding: 8px 32px;
    border-radius: 4px;
text-align: center; 
	font-size:3em;	
	display:inline;
}

.element_head_text {
background: #fff;
    padding: 8px 32px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.8em;
    margin-bottom: 10px;
    text-align: center;
}


.sub_tt_sub {
    text-align: center;
    color: #fff;
    display: inline-block;
    line-height: 1;
    padding: 5px 10px;
    letter-spacing: .2rem;
    margin: 0 auto 8px;
    background-color: #027da9;
    background: #8BC34A;
}

.price-table-wrap {
  text-align: center;
  margin: 40px auto;
  max-width: 860px;
}

.price-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
}

.price-title::after {
  content: "";
  display: block;
  width: 100%;
  height: 6px;
  background: #f5e1a4; /* 見本の影っぽい色 */
  position: absolute;
  left: 0;
  bottom: -6px;
  z-index: -1;
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.price-table thead th {
  padding: 12px;
  font-weight: bold;
  border: 1px solid #e0e0e0;
}

.price-table tbody td,
.price-table thead tr:nth-child(2) th {
  border: 1px solid #e0e0e0;
    padding: 8px 3px;
    line-height: 1.5;
}

.price-table tbody td {
  text-align: center;
}


.schedule-table-wrap {
  text-align: center;
  margin: 40px auto;
  max-width: 900px;
}

.schedule-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
}

.schedule-title::after {
  content: "";
  display: block;
  width: 100%;
  height: 6px;
  background: #f5e1a4;
  position: absolute;
  left: 0;
  bottom: -6px;
  z-index: -1;
}

.schedule-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.schedule-table thead th {
  background: #fbe9d2;
  padding: 10px;
  border: 1px solid #e0c690;
  font-weight: bold;
}

.schedule-table tbody td {
  border: 1px solid #e0c690;
  padding: 10px;
  text-align: center;
}

.schedule-table tbody td:first-child {
  font-weight: bold;
  background: #fffaf2;
}

.flow-wrap {
  max-width: 900px;
  margin: 40px auto;
}

.flow-title {
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40px;
  position: relative;
}

.flow-title::after {
  content: "";
  display: block;
  width: 100px;
  height: 6px;
  background: #f5e1a4;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -10px;
  z-index: -1;
}

.flow-step {
  display: flex;
  align-items: flex-start;
  margin-bottom:8px;
}

.flow-left {
  width: 120px;
  text-align: center;
  position: relative;
}

.step-num {
  font-size: 14px;
  color: #555;
  margin: 0;
	line-height:1.3;
}

.step-num span {
  font-size: 26px;
  font-weight: bold;
	color: #333;
}

.step-line {
  width: 2px;
  height:60px;
  background: #ffa500;
  margin: 10px auto;
}

.flow-step:last-child .step-line {
  display: none;
}

.flow-right {
  flex: 1;
  padding:0 8px;
}

.flow-right h3 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 8px;
  color:#F4810E;
}

.flow-right h3 i {
  margin-right: 8px;
  color:#F4810E;
}

.flow-right p {
  margin: 0;
  color: #444;
  line-height: 1.6;
}

.speechBubble {
    position: relative;
    /* display: inline-block; */
    margin-bottom: 20px;
    padding: 12px 16px;
    border-radius: 9999px;
    background-color: #fcdf00;
    text-align: center;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.5;
    color: #333;
    /* margin: auto; */
	max-width:460px;
    margin: 0 auto 1.5em;
}

.speechBubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 20px 10px 0 10px;
  border-color: #fcdf00 transparent transparent;
  translate: -50% 100%;
}

/* ポップアップのスタイル */
.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
}

.popup-content {
    position: relative;
    width: 90%;
    max-width: 600px;
    background: white;
    padding: 20px;
    border-radius: 10px;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 25px;
    cursor: pointer;
}

#youtube-frame {
    width: 100%;
    height: 315px;
}

.er-box {
    background: #fff;
    position: relative;
    padding-top:174px;
    font-size: 16px;
    max-width: 619px;
    margin: auto;
}
.er-tt {
    position: absolute;
    top: -22px;
    right: 0;
    left: 18px;
    margin: 0 auto;
    width: 100%;
    z-index: 1;
}
@media only screen and (max-width: 763px) {
.er-box{
    background: #fff;
    position: relative;
    padding-top:100px;
	    font-size: 15px;
}

.er-tt{
        position: absolute;
        top: -13px;
        right: 0;
        left: -13px;
        margin: 0 auto;
        width: 108%;
}

}

.price_big{
color: #e32011;
    font-size: 170%;
}
.sp_banner_up{
    position: fixed;
    top: 0;
    z-index: 999;
    left:0;
    background: rgb(224 224 224 / 80%);
}

.fade-in {
    position: fixed;
    opacity: 0;
    transform: translateY(-50px); /* 50px下から開始 */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.fade-in.show {
    opacity: 1;
    transform: translateY(0); /* 元の位置に移動 */
}

        /* テキスト表示エリア */
        .scroll-text {
            position: fixed;
            bottom: -50px; /* 初期位置（画面外） */
            left: 50%;
            transform: translateX(-50%);
    background: rgb(1 148 243 / 95%);
            color: white;
            padding: 15px 20px;
            border-radius: 0px;
            font-size: 16px;
            opacity: 0;
            transition: opacity 0.5s ease-in-out, bottom 0.5s ease-in-out;
width:100%;
    padding: 20px 20px;
    text-align: center;
line-height: 1.3;
        }

        /* 表示状態 */
        .scroll-text.show {
bottom:0;
            opacity: 1;
z-index:999;
        }


.TextTyping span {
  display: none;
}
.TextTyping::after {
  content: "|";
  animation: typinganime .8s ease infinite;
}

@keyframes typinganime{
  from{opacity:0}
  to{opacity:1}
}

. number{
font-size: 22px; color: #ffe450; font-weight: bold;"
}

.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
}

.popup-content {
    position: relative;
    width: 90%;
    max-width: 600px;
    background: white;
    padding: 20px;
    border-radius: 10px;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 25px;
    cursor: pointer;
}

#youtube-frame {
    width: 100%;
    height: 315px;
}

.hikaku table{
  width: 100%;
  border-collapse: collapse;
}

.hikaku table tr{
  border-bottom: solid 2px white;
}

.hikaku table tr:last-child{
  border-bottom: none;
}

.hikaku table th{
position: relative;
    text-align: left;
    width: 22%;
    background-color: #e9ebe3;
    color: #909582;
    text-align: center;
    padding: 24px 0;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    line-height: 1.2;
}

.hikaku table th:after{
  display: block;
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  top:calc(50% - 10px);
  right:-10px;
  border-left: 10px solid #e9ebe3;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

.hikaku table td{
text-align: left;
    width: 39%;
    background-color: #F5F5F5;
    padding: 10px 10px;
    line-height: 1.6;
    border: dotted 2px #efebe9;
    font-size: 13px;
}

.hikaku table td:nth-child(2){
  border-right: 2px solid #fff;
}

.hikaku table td:nth-child(3){
  font-weight:bold;
  background-color: #fffde8;
  
}

.hikaku .non{
  background:#fff
}

.hikaku .col1{
    background-color: #eeeeee;
    color: #000;
}

.hikaku .col2{
    background-color:#ff9529;
  color:#fff;
}

.hikaku table thead tr th:after{
  border-left:none;
  border-top:none;
  border-bottom:;
}
@media (max-width:736px) {
.hikaku {
    width: 95%;
    margin: 16px auto 16px;
	}
}

#lp .hikaku tr, td {
	border:none;
}
.tdMyway{
	font-size:20px !important;
    font-weight: 700;
    background: #fffde7 !important;
}
@media (max-width:736px) {
.tdMyway{
	font-size:17px !important;
}	
}

.Myway{
	border: solid 5px #fd520c;
}

.Myway th:after{
	    display: block;
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    top: calc(50% - 10px);
    right: -10px;
    border-left: 10px solid #FF9209 !important;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

.tableBasic01 table {
    border-collapse: collapse;
    font-size: 95%;
    border-spacing: 0;
    margin-left: auto;
    margin-right: auto;
}

.tableBasic01 table {
    border-style:1px solid #040404;
    border-color: #040404;
    border-size: 1px;
    width: 100%;
}

.tableBasic01 td {
    padding: 10px;
    line-height: 2em;
}

.tableBasic01 tr {
    padding: 10px;
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 1px dotted #040404;
}

.tableBasic01 {
    padding: 8px;
}


.tableBasic01 table th {
    text-align: center;
    padding: 16px 5px;
    border-right: 1px dotted #fff;
    border: 1px solid #040404;
	background-color: #fafafa;
}

.tableBasic01 table td {
    background: #fff;
    text-align: center;
    padding: 10px 5px;
    border: 1px solid #040404;
    text-align: left;
	    font-size: 14px;

}

.taC {
    text-align: center !important;
}

.w25per {
    width: 25% !important;
}

.w30per {
    width: 30% !important;
}

.w35per {
    width: 35% !important;
}

.nokori{
    text-align: center;
    font-size: 32px;
    font-weight: 600;
    background:#ffeb3b;
    letter-spacing: 0;
    color: #d30000;
    line-height: 1.3;
    padding: 16px 8px 16px;
    width: 93%;
    margin: 0 auto 12px;
	    border: solid 5px #000000;
}

.nokori{
    text-align: center;
    font-size: 32px;
    font-weight: 600;
    background:#ffeb3b;
    letter-spacing: 0;
    color: #d30000;
    line-height: 1.3;
    padding: 16px 8px 16px;
    width: 93%;
    margin: 0 auto 12px;
	    border: solid 5px #000000;
}

.bg-fill2 {
    padding: 1rem 1rem;
    background: #FFFDE7;
    color: #111;
    border-radius: 3px;
    font-size: 16px !important;
    border-left: #f6ab00 6px solid;
}

.qa-7 {
    max-width:640px;
    margin-bottom: 10px;
    border: none;
    border-radius: 5px;
    box-shadow: 0 4px 4px rgb(0 0 0 / 2%), 0 2px 3px -2px rgba(0 0 0 / 5%);
    background-color: #fff;
}

.qa-7 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em 1em 3em;
    color: #333333;
    font-weight: 600;
    cursor: pointer;
		font-size:15px;
}

.qa-7 summary::before,
.qa-7 p::before {
    position: absolute;
    left: 1em;
    font-weight: 600;
    font-size: 1.3em;
}

.qa-7 summary::before {
    color: #75bbff;
    content: "Q";
}

.qa-7 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #333333b3;
    border-right: 3px solid #333333b3;
    content: '';
    transition: transform .5s;
}

.qa-7[open] summary::after {
    transform: rotate(225deg);
}

.qa-7 p {
    position: relative;
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: .3em 3em 1.5em;
    color: #333;
    transition: transform .5s, opacity .5s;
		font-size:15px;
}

.qa-7[open] p {
    transform: none;
    opacity: 1;

}

.qa-7 p::before {
    color: #ff8d8d;
    line-height: 1.2;
    content: "A";
}

/* 習慣セクションの全体設定 */
.habits-section {
    max-width: 1200px; /* 最大幅を設定し、中央に寄せる */
    margin: 0 auto;
}

.habit-container {
    display: flex;
    flex-wrap: wrap; /* 要素が収まりきらない場合に折り返す */
    gap: 30px; /* カード間のスペース */
    justify-content: center; /* 中央寄せ */
}

/* 各習慣アイテムのデザイン（カード形式） */
.habit-item {
    background-color: white;
    border: 1px solid #e0e6eb;
    border-radius: 8px;
    padding: 30px;
    width: calc(33.333% - 20px); /* 1行に3つ配置（3つ目だけ幅調整） */
    min-width: 280px; /* 最小幅 */
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
    overflow: hidden;
}

/* 習慣番号のアイコンデザイン */
.habit-icon {
    font-size: 2.5em;
    font-weight: 700;
    color:#f4810e; /* テーマカラー */
    margin-bottom:0px;
    display: inline-block;
    padding-bottom: 5px;
}

/* タイトルと説明 */
.habit-title {
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 15px;
    padding-left: 10px;
}

.habit-description {
    color: #555;
}

/* フッターデザイン */
.page-footer {
    background-color: #333;
    color: #ccc;
    text-align: center;
    padding: 20px 0;
    font-size: 0.9em;
    margin-top: 40px;
}

/* レスポンシブデザイン（タブレット/スマートフォン対応） */
@media (max-width: 1024px) {
    .habit-item {
        width: calc(50% - 20px); /* 2列表示 */
    }
}

@media (max-width: 768px) {
    .page-header {
        padding: 40px 15px;
    }
    .page-header h1 {
        font-size: 2em;
    }
    .habit-item {
        width:90%; /* 1列表示 */
        padding: 25px;
    }
    .habit-title {
        font-size: 1.3em;
    }
}


@media (max-width: 768px) {
.message-content-title {
    position: absolute;
    right: 15px;
    top: -60px;
    background-color: #fff;
    padding: 20px 16px;
    width: 74px;
    line-height: 1.2;
}	
.section-title {
    font-size: 16px;
    font-weight: bold;
}	

.message-header-image {
  position: relative;

  .text-overlay {
position: absolute;
            left: 6%;
            bottom: 10%;
            background: rgb(255 255 255 / 80%);
            padding: 8px;

    p {
      color: #333;
      line-height: 1;
      font-size: 1rem;

      &:nth-child(2) {
        font-size:1.2rem;
        font-weight: 700;
        line-height: 1.5;
      }
    }
  }	
	
}
}
	
/*========= 途中からハンバーガーメニューに変化するのためのCSS ===============*/

/*========= ボタンのためのCSS ===============*/

/*ボタン全体の形状*/
.openbtn1{
    /*はじめは非表示に*/
  display: none;
    /*ボタンの位置*/
  position:fixed;
  top:10px;
	right: 32px;
  z-index: 999;
    /*ボタンの形状*/
  background:#666;
  cursor: pointer;
    width: 50px;
    height:50px;
  border-radius: 5px;
}

/*ボタンのアイコン設定*/
.openbtn1 span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
  background-color: #fff;
    width: 45%;
  }

.openbtn1 span:nth-of-type(1) {
  top:15px; 
}

.openbtn1 span:nth-of-type(2) {
  top:23px;
}

.openbtn1 span:nth-of-type(3) {
  top:31px;
}

/*activeクラスが付与された後のボタンのアイコン設定*/
.openbtn1.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn1.active span:nth-of-type(2) {
  opacity: 0;
}

.openbtn1.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}

/*fadeDownクラスが付与された後のボタンの出現アニメーション設定*/
.fadeDown {
    animation-name: fadeDownAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
    display: block;
}
@keyframes fadeDownAnime{
  from {
    opacity: 0;
  transform: translateY(-100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}


/*========= ヘッダーナビゲーションのためのCSS ===============*/

/*==ヘッダーの形状*/
#header{
  width:100%;
  align-items: center;
  background:#fff;
  color:#333;
  text-align: center;
  padding: 20px;
    max-width:1700px;
    margin: 0 auto;
    padding: 0 8px;
	min-height:100px;
	
}
@media (max-width: 768px) {
#header{
    max-width: 1180px;
}	
}


/*.doneクラスがついたヘッダー*/
#header.dnone {
  opacity: 0;/*透過0にして非表示に*/
}

/*メニューボタンをクリックした際に付与されるpanelactiveクラスがついたら*/
#header.dnone.panelactive {
  opacity: 1;/*不透明にして出現*/
}


/*==ヘッダーのテキストナビゲーションの形状*/
#g-navi ul{
  list-style: none;
  display: flex;
  justify-content: center;
font-size: 15px;
	margin-bottom:0;
	border-radius: 5px;
}

#g-navi ul li a{
  display: block;
  text-decoration: none;
  color: #333;
font-weight:bold;
}

#g-navi ul li.current a,
#g-navi ul li a:hover{
}

/*.doneクラスがついたヘッダーのテキストナビゲーションの形状*/
#header.dnone #g-navi{
    /*固定位置にして最背面に*/
    position:fixed;
  top: 0;
    left: 0;
  z-index: -1;
    /*幅*/  
  width:100%;
    /*天地中央＆テキスト中央揃え*/  
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
    /*はじめは透過0に*/  
    opacity: 0;
  transition: all 0.4s;
}

/*メニューボタンをクリックした際に付与されるpanelactiveクラスがついたナビゲーションの形状*/
#header.dnone.panelactive #g-navi{
  opacity: 1;/*不透明に*/
  z-index:3;/*最前面に*/
  background:#333;
height: 100vh;
}

#header.dnone.panelactive #g-navi ul{
	font-size:32px;
  display:block;/*flexの横並びをblockにして縦並びに*/
	text-align:left;
}
@media (max-width: 768px) {
#header.dnone.panelactive #g-navi ul{
	font-size:20px;
}	
}

/*リストの形状*/

#header.dnone.panelactive #g-navi li a{
  color: #fff;
  text-decoration: none;
  padding:10px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: bold;
  transition:all 0.3s;
}

section{
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
#g-navi ul li a {
    display: none;
}
}

@media (max-width: 768px) {
.eng-tt{
	display:block;
	color:#bdbdbd;
	}}

@media (max-width: 768px) {
.openbtn1 {
    right: 16px;
}	
}

.desktop-nav .en {
        font-size: 12px;
        font-weight: 400;
        color: #777777;
        letter-spacing: .05em;
        margin-top: 2px;
	display: block;
    }
.desktop-nav .ja
 {
    font-size: 16px;
	 font-weight:500;
}

@media (max-width: 768px) {
.black_head {
    background: #333333;
    min-height: 30px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    letter-spacing: 1px;
    width: 100%;
    background: linear-gradient(to right, #e6bc1b 1%, #fd520c 100%);
    font-size: 12px;
}
}

.vision_tt1{
    font-size:80px;
    font-family: 'Noto Sans JP', sans-serif;
	font-weight: 800;
	letter-spacing:3px;
	line-height:1.2;
	color:#f4810e;
}

.vision_tt1_sub{
    font-size: 20px;
    display: block;
    letter-spacing: 0;
    margin-bottom: -6px;
    font-weight: 500;
    color: #7f7f7f;
}

.vision_tt2{
    color: #7f7f7f;
	font-size: 40px;
    font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
	letter-spacing:5px;
	line-height:1.5;
}

@media (max-width: 768px) {
.vision_tt1 {
    font-size: 36px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 800;
    letter-spacing:4px;
    line-height: 1.3;
	color:#f4810e;
}	
.vision_tt2 {
    font-size: 23px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    letter-spacing: -2px;
    line-height: 1.4;
}	
}
@media (max-width: 768px) {
.message-content {

  h3 {
    margin: 42px 0 24px;
  }
}
	}

/* ================================================= */
/* フローティングバナー（下部固定）のスタイル */
/* ================================================= */
#floating-banner-container {
    /* 画面下部に固定 */
    position: fixed;
    bottom: 0;
    left: 0;
width:86%;
    z-index: 1000;
    padding: 24px 0;
    background:rgb(231 255 233 / 95%);
    margin: auto;
    bottom: 0;
    right: 0;
    left: 0;
    border-radius: 30px 30px 0 0;
	
 /* --- ここから追記 --- */
    /* 1. 初期状態で自身の高さ分、下に移動させて画面外に隠す */
    transform: translateY(100%);
    /* 2. スムーズなスライドアップアニメーションを設定 */
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 少し弾むようなイージング */
}

/* スクロール後にJSで付与するクラス：画面内に表示する状態 */
#floating-banner-container.is-visible {
    transform: translateY(0); /* 元の位置（bottom: 0）に戻す */
}

/* モバイル表示時の調整（横幅100%に広げるなど） */
@media (max-width: 768px) {
    #floating-banner-container {
        width: 100%;
        border-radius: 10px 10px 0 0;
    }
}

.banner-content {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between; /* 要素を左右に分ける */
    align-items: center;
    padding: 0 15px; /* モバイル対応のための左右の余白 */
}

/* --- テキスト部分 --- */
.banner-text {
    color: #333;
    font-size: 46px; /* メインテキストのサイズ */
    font-weight: bold;
    line-height: 1.4;
}

.banner-text small {
    display: block;
    font-size: 16px; /* サブテキストのサイズ */
    font-weight: normal;
    color:#333;
	text-align:center;
}

/* --- CTA（行動喚起）部分の全体 --- */
.banner-cta {
    display: flex;
    align-items: center;
    gap: 15px; /* 時間表示とボタンの間のスペース */
	    max-width: 550px;
}

/* --- カンタン1分 の部分 --- */
.cta-time {
    background-color: #ffda46; /* 黄色の背景 */
    color: #333;
    padding: 5px 10px;
    border-radius: 20px;
    text-align: center;
    min-width: 70px;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    /* 元画像のグラデーションに似せるため */
    background: linear-gradient(180deg, #ffd700, #ffc400); 
}

.cta-time small {
    display: block;
    font-size: 10px;
    font-weight: normal;
}

.cta-time span {
    font-size: 18px;
    line-height: 1;
}

/* --- ボタン部分 --- */
.cta-button {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    background-color: #4CAF50; /* LINEカラーの緑 */
    color: white;
    font-weight: bold;
    padding: 12px 20px;
    border-radius: 8px;
    transition: background-color 0.3s;
    white-space: nowrap; /* テキストが改行されないように */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    /* 元画像のグラデーションに似せるため */
    background: linear-gradient(180deg, #4CAF50, #388E3C); 
}

.cta-button:hover {
    background: linear-gradient(180deg, #388E3C, #4CAF50);
}

/* ================================================= */
/* レスポンシブ対応（画面が狭いとき） */
/* ================================================= */
@media (max-width: 600px) {
    .banner-content {
        flex-direction: column; /* 縦に並べる */
        text-align: center;
        gap: 0px;
    }

    .banner-text {
        font-size: 16px;
    }
    
    .banner-text small {
        margin-bottom: 0px;
		font-size:14px;
    }

    .banner-cta {
        width: 100%;
        justify-content: center; /* 中央寄せ */
    }
    
    .cta-button {
        flex-grow: 1; /* ボタンを大きく広げる */
        justify-content: center;
        padding: 10px 15px;
        font-size: 14px;
    }

    .cta-time {
        min-width: 60px;
    }
	
	#floating-banner-container {
position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 24px 0;
    background:rgb(231 255 233 / 95%);
    margin: auto;
    bottom: 0;
    right: 0;
    left: 0;
    border-radius: 10px 10px 0 0;		
		padding:16px 0;
}
}

/* ==================================== */
/* サブメニューのスタイル調整（最終版） */
/* ==================================== */

/* サブメニュー付きliの基準位置を確保 */
.desktop-nav > li.has-submenu {
  position: relative;
}

/* サブメニュー本体 */
.desktop-nav .submenu {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #ddd;
  min-width: 180px;
  z-index: 9999;

  /* 非表示状態 */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;

  /* 縦並び構成 */
  display: flex;
  flex-direction: column;
}

/* hover時に表示 */
.desktop-nav > li:hover > .submenu {
  visibility: visible;
  opacity: 1;
}

/* サブメニュー内リスト要素 */
.submenu li {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
}

/* サブメニュー内リンク */
.submenu li a {
  display: block;
  padding: 10px 15px;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  transition: background-color 0.2s ease;
}

/* ホバー時 */
.submenu li a:hover {
  background-color: #f0f0f0;
}

/* ヘッダー全体をFlexboxで調整 */
.header-with-buttons {
    display: flex;
    flex-direction: column; /* ロゴ/ボタンとナビゲーションを縦に並べる */
}

/* ロゴとボタン群のコンテナを横並びにする */
.header-main-content {
    display: flex;
    align-items: center; /* 垂直方向の中央揃え */
    justify-content: space-between; /* ロゴとボタン群を両端に寄せる */
    padding: 10px 20px; /* 適度な余白 */
}

/* 電話番号とボタン群のエリア */
.header-contact-area {
    display: flex;
    align-items: center;
    gap: 15px; /* 要素間のスペース */
}

/* 電話番号ブロックのスタイル */
.tel-block {
    text-align:center;
    color: #333; /* テキスト色を調整 */
}
.tel-block .tel-text {
    font-size: 12px;
    margin-bottom: 3px;
    color: #333;
}
.tel-block .tel-number-wrap {
    font-weight: bold;
    margin: 0;
    line-height: 1;
}
.tel-block .tel-number {
    font-size: 24px;
    color:#2d82bc; /* 電話番号の色を青に */
    text-decoration: none;
    vertical-align: middle;
}
.tel-block .tel-icon {
    font-size: 20px;
    vertical-align: middle;
    margin-right: 5px;
}
.tel-block .business-hours {
    font-size: 11px;
    color: #555;
    margin-top: 3px;
}

/* 共通ボタンのスタイル */
.contact-button {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 15px 25px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 16px;
    white-space: nowrap; /* ボタン内のテキストの折り返しを防ぐ */
    transition: background-color 0.3s;
}

.contact-button .icon {
    margin-right: 8px;
    font-size: 20px;
}


/* お問い合わせボタン（右側のボタン） */
.inquiry-button {
    background-color: #008cba; /* 濃い青色 */
    color: #fff;
    border: 2px solid #008cba;
    min-width: 150px; /* 必要に応じてサイズ調整 */
}
.inquiry-button:hover {
    background-color: #006b8f;
}

/* スマートフォンでの非表示設定 (既存の .pc クラスに依存) */
/* .pc { display: none; } の設定があるはずなので、それに従います */


/* ロゴと右側エリア（メニュー＋連絡先）を左右に振り分ける */
#header > div {
    display: flex;         /* 子要素（ロゴとheader-right-area）を横並びにする */
    align-items: center;   /* 垂直方向の中央揃え */
    justify-content: space-between; /* ロゴを左、右側エリアを右に配置 */
    /* 既存の padding: 0 8px; は #header に残っているので、ここでは省略 */
    /* ただし、元々 #header にあった高さや幅の指定（max-width, margin, min-heightなど）は、
       必要に応じてこの div に移すか、#header の指定を見直す必要があります。 */
}

/* メニューと連絡先エリアを横並びにする */
.header-right-area {
    display: flex;         /* g-naviとheader-contact-areaを横並びにする */
    align-items: center;   /* 垂直方向の中央揃え */
}

/* メニューと連絡先エリアの間に適切な間隔を空ける */
.header-contact-area {
    margin-left: 20px; 
}

/* ナビゲーションリストのマージン調整（既存のCSS設定との競合を防ぐため） */
#g-navi ul {
    margin-bottom: 0; /* 既存CSSで設定されていますが、確実に0にしておきます */
    margin-top: 0; 
}

/* PC表示でスクロール後に固定するボタンのコンテナ */
.pc-scroll-menu-btn {
    /* 初期状態：画面外に隠す、または透明にしておく */
    position: fixed;
    top: -100px; /* 初期状態は画面外に完全に隠す */
    right: 20px; /* 右上の位置調整 */
    z-index: 9998; /* メニューパネルより下、コンテンツより上 */
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    cursor: pointer;
}

/* スクロール後にJSで付与するクラス：表示状態 */
.pc-scroll-menu-btn.is-visible {
    top: 20px; /* 右上に表示する位置 */
    opacity: 1;
    visibility: visible;
}

/* ハンバーガーアイコンのデザイン（既存の.openbtn1があればそれを使用） */
/* ※ここでは一般的なデザイン例を記述 */
.pc-scroll-menu-btn .openbtn1 {
    display: block;
    position: relative;
    width: 50px;
    height: 50px;
    background:#f4810e; /* ボタンの背景色 */
    border-radius: 5px;
}
.pc-scroll-menu-btn .openbtn1 span {
    display: block;
    position: absolute;
    height: 3px;
    background: #fff;
    left:13px;
    right: 8px;
    transition: all 0.3s;
}
.pc-scroll-menu-btn .openbtn1 span:nth-child(1) { top: 10px; }
.pc-scroll-menu-btn .openbtn1 span:nth-child(2) { top: 23.5px; }
.pc-scroll-menu-btn .openbtn1 span:nth-child(3) { top: 37px; }

/* ボタンがクリックされた時のアイコン変化 */
.pc-scroll-menu-btn.active .openbtn1 span:nth-child(1) { transform: translateY(13.5px) rotate(-45deg); }
.pc-scroll-menu-btn.active .openbtn1 span:nth-child(2) { opacity: 0; }
.pc-scroll-menu-btn.active .openbtn1 span:nth-child(3) { transform: translateY(-13.5px) rotate(45deg); }

/* ================================================= */
/* メニューパネル（左半分表示）の修正CSS */
/* ================================================= */

#full-screen-menu {
    position: fixed;
    top: 0;
    /* 修正：right: 0; から left: 0; へ変更し、左端に固定 */
    left: 0; 
    width:30%; /* 画面の左半分を使用 */
    height: 100vh;
    background:#F4810E; 
    z-index: 9999;
    
    /* 修正：初期状態は画面の左外に完全に隠す */
    transform: translateX(-100%); 
    opacity: 0; 
    visibility: hidden;
    
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                opacity 0.5s ease;
    padding-top:50px;
    display: block;
    /* 修正：影を右側に追加 */
    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1); 
}

/* メニュー表示時（.panelactiveが付与された状態） */
#full-screen-menu.panelactive {
    /* 修正：元の位置に戻る（左端からスライドイン） */
    transform: translateX(0); 
    opacity: 1;
    visibility: visible;
}

/* ================================================= */
/* オーバーレイ（背景を暗くしてクリックで閉じる機能用）の追加CSS */
/* ================================================= */
#overlay {
    display: none; /* 初期状態は非表示 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5); /* 半透明の黒 */
    z-index: 9998; /* メニューパネルより一つ下に配置 */
    cursor: pointer;
    transition: opacity 0.5s ease;
}

/* メニューが開いているときはオーバーレイを表示 */
body.no-scroll #overlay {
    display: block;
}
/* ================================================= */
/* メニューパネル全体 (既存の #full-screen-menu の装飾と重複しないように調整) */
/* ================================================= */
#full-screen-menu {
    /* 以前設定した位置、スライド、z-indexなどの設定はそのまま使用します */
    /* background: #f7f7f7; など */
}

/* メニューコンテンツの親 ul 要素 */
.off-canvas-menu {
    list-style: none;
	padding: 0 24px; /* padding: 20px; などを個別に調整しても良い */
    margin: 0;
    width: 100%;
    box-sizing: border-box; /* paddingを含めて幅100%とする */
}

/* ================================================= */
/* メニュー項目のスタイル (添付画像のようなデザイン) */
/* ================================================= */

.off-canvas-item {
    /* 項目ごとのデザイン */
    padding: 15px 25px; /* 上下のパディングを多めに、左右のパディングで余白を確保 */
    cursor: pointer;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* 区切り線を薄く */
    position: relative;
    /* 既存の li 要素にあった border-right: solid 1px #E0E0E0; はここで無効化 */
    border-right: none !important; 
}

.off-canvas-item:last-child {
    border-bottom: none;
}

/* 項目内の a 要素 */
.off-canvas-item > a {
    display: block;
    text-decoration: none;
    color: #333; /* 文字色 */
    font-weight: 500;
    transition: all 0.2s;
	line-height:1.5;
}

/* ホバー時の背景色と文字色 (添付画像のように背景色を強調) */
.off-canvas-item:hover {
    background: #d7720c; /* 薄いグリーン系の背景色（例） */
}
.off-canvas-item:hover > a {
    color:#d7720c; /* ホバー時の文字色 */
}


/* アクティブなメニュー項目（現在開いているページなど） */
.off-canvas-item.is-active {
    background: #01b563; /* メインカラーを背景に */
}
.off-canvas-item.is-active > a {
    color: #fff; /* 文字色を白に */
}
.off-canvas-item.is-active:hover {
    background: #00a05a; /* アクティブな状態でのホバー */
}

/* 日本語と英語表記の調整 */
.off-canvas-item .ja {
    display: block;
    font-size: 1.1rem;
	color:#fff;
}
.off-canvas-item .en {
    display: block;
    font-size: 0.8rem;
    color:#fbcea0; /* 英語表記を少し暗く */
}
.off-canvas-item.is-active .en {
    color: #fff; /* アクティブ時は白に */
}

/* サブメニューを持つ項目のアイコン調整（必要に応じて） */
.has-submenu-item > a::after {
    /* 例: 矢印アイコンを右端に追加するCSS */
}

/* サブメニューのスタイル */
.off-canvas-submenu {
    list-style: none;
    padding: 0 0 0 20px; /* インデントを設定 */
    margin: 10px 0;
    background: rgba(0, 0, 0, 0.03); /* 背景をわずかに変える */
}
.off-canvas-submenu li a {
    display: block;
    padding: 8px 10px;
    font-size: 0.95rem;
    color:#FBCEA0;
    text-decoration: none;
}

.off-canvas-menu .tel-block .tel-text{
	text-align:center;
	color:#fff;
}
.off-canvas-menu .tel-block .tel-number-wrap{
	text-align:center;
	color:#fff;
}
.off-canvas-menu .tel-block .tel-number {
    font-size: 24px;
    color: #fff;
    text-decoration: none;
    vertical-align: middle;
}
.off-canvas-menu .tel-block .business-hours {
    font-size: 11px;
    color: #fff;
    margin-top: 3px;
	text-align:center;
}
.off-canvas-menu .inquiry-button {
    background-color: #fff;
    border: 2px solid #fff;
    min-width: 150px;
	text-align: center;
}


@media screen and (max-width: 768px) {
#full-screen-menu {
    width: 77%; /* 画面の左半分を使用 */
    padding-top: 20px;
	}
.off-canvas-item {
    /* 項目ごとのデザイン */
    padding: 8px 16px; /* 上下のパディングを多めに、左右のパディングで余白を確保 */
}
.off-canvas-submenu li a {
    padding: 4px 10px;
}	
}

/* ==================================== */
/* 1440px 以上 (元の横並びレイアウト) */
/* ==================================== */
#header {
    width: 100%;
    background: #fff;
    color: #333;
    text-align: center;
    max-width: 1700px;
    margin: 0 auto;
    padding: 0 8px;
    min-height: 100px;
}

/* ロゴと右側エリアを囲む div のデフォルト（横並び） */
#header > div {
    display: flex;
    justify-content: space-between; /* ロゴと右側エリアを両端に寄せる */
    align-items: center;
    width: 100%;
}

/* ヘッダー右側エリア（メニューと連絡先）のデフォルト（横並び） */
.header-right-area {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* メニュー ul の設定（横並び） */
#g-navi ul {
    list-style: none;
    display: flex;
    justify-content: center;
    font-size: 15px;
    margin-bottom: 0;
    margin-top: 0;
    border-radius: 5px;
    padding-left: 0;
}


/* ==================================== */
/* 1439px 以下で適用するレイアウト */
/* ロゴが上中央、その下にメニューと連絡先が元の横並びで中央 */
/* ==================================== */
@media (max-width: 1439px) {
    /* 1. ヘッダー直下の div：ロゴと右側エリアを縦に積む */
    #header > div {
        flex-direction: column; /* 要素を縦に並べる */
        align-items: center; /* 要素を中央揃えにする */
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* 2. ヘッダー右側エリア（メニューと連絡先を含む）: 元の横並び（メニューと連絡先が横並び）を維持し、セットで中央に配置 */
    .header-right-area {
        /* 横並び (display: flex;) は維持 */
        justify-content: center; /* メニューと連絡先エリアのセット全体を中央に寄せる */
        width: auto; /* コンテンツの幅に合わせる */
        margin-left: 0; /* 不要なマージンをリセット */
        padding-top:0px; /* ロゴとの間にスペース */
        
        /* 狭い画面でも横並びを維持する */
        flex-wrap: nowrap;
    }
    
    /* 3. ナビゲーションメニューの ul は横並びを維持 */
    #g-navi ul {
        justify-content: center; /* デフォルトの中央揃えを維持 */
    }

    /* 4. 電話と問い合わせボタンエリアは横並びを維持 */
    /* .header-contact-area は display: flex; が維持されます */
}

@media (max-width: 1185px) {
.desktop-nav .en {
        font-size:60%;
        font-weight: 400;
        color: #777777;
        letter-spacing: .05em;
        margin-top: 2px;
	display: block;
    }
.desktop-nav .ja
 {
    font-size:80%;
	 font-weight:500;
}
	.tel-block .tel-number {
    font-size:80%;
    color: #2d82bc;
    text-decoration: none;
    vertical-align: middle;
}
	.tel-block .tel-text {
    font-size:60%;
    margin-bottom: 3px;
    color: #333;
}
	.tel-number-wrap .tel-block .tel-icon{
		    font-size:80%;
	}
.tel-block .business-hours {
    font-size:50%;
    color: #555;
    margin-top: 3px;
}
	.inquiry-button {
		font-size:80%;
	}
	.contact-button .icon {
    margin-right: 8px;
    font-size:80%px;
}
}
/* ==================================== */
/* 1439px 以下で適用するレイアウト */
/* ロゴが上中央、その下にメニューと連絡先が元の横並びで中央 */
/* ==================================== */
@media (max-width: 1439px) {
    /* 1. ヘッダー直下の div：ロゴと右側エリアを縦に積む */
    #header > div {
        flex-direction: column; 
        align-items: center; 
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* 2. ヘッダー右側エリア（メニューと連絡先を含む）を横幅いっぱいにし、中身を中央に配置 */
    .header-right-area {
        /* 横幅いっぱいに設定 */
        width: 100%; 
        
        /* 中身（メニューと連絡先）のセット全体を中央に寄せる */
        justify-content: center; 
        
        /* 横並び (display: flex;) は維持 */
        align-items: center;
        gap: 15px; 
        
        margin-left: 0; 
        padding-top:0px; 
        
        /* 狭い画面でも横並びを維持 */
        flex-wrap: nowrap; 
    }
}

.link-logo img{
	max-width:200px;
}
@media (max-width: 1439px) {
	.link-logo img{
	max-width:170px;
}
}
@media (max-width: 1001px) {
.header-right-area {
display:none !important;
}
	}
@media (max-width: 1200px) {
.banner-cta {
    max-width:400px;
}	
.flo-text{
font-size:75%;
}
.banner-content {
    max-width: 840px;
}	
}

.ichiran_btn{
    padding: 9px 5px !important;
    width: 100%;
    background: #333;
    font-size: 16px !important;
    line-height: 18px !important;
    color: #FFF !important;
    text-align: center;
    text-decoration: none;
    display: block;
    position: relative;
    transition: all 0.3s ease;
	border-radius:3px;
	font-weight:bold;
	box-shadow: 0px 1px 5px 0px rgb(0 0 0 / 25%);
}

@media screen and (max-width: 768px){
.ichiran_btn {
    width:100%;
    margin: 16px auto 0;
}
}

.line_btn {
    background: #00c43e !important;
    color: #fff !important;
    border-radius: 100vh !important;
    max-width: 500px !important;
		min-width:300px;
    width: 100% !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;	
	box-shadow: 0 5px 0 #00912e;
}


/* ============================
   スマホ上部固定ヘッダー
   ============================ */

.sp-header {
    display: none; /* PCでは非表示。SPメディアクエリ内でdisplay:blockにする */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;              /* 好みで高さ調整 */
    background: #fff;
    z-index: 10000;            /* メニューより上に */
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.sp-header-inner {
    max-width: 1080px;         /* 必要ならPCと合わせて */
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    box-sizing: border-box;
}

.sp-logo img {
    max-height: 40px;
}

/* 右側（学習中の方 + メニュー） */
.sp-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sp-header-link {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #2d82bc;
    text-decoration: none;
}

.sp-header-link i {
    font-size: 14px;
}

/* メニューボタン（KUMON風） */
.sp-menu-btn {
    border: none;
    background: transparent;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 10px;
    color: #2d82bc;
}

/* ハンバーガー3本線（SP専用デザイン） */
.sp-header .openbtn1 {
    display: inline-block;
    position: relative;
    width: 26px;
    height: 20px;
}

.sp-header .openbtn1 span {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #2d82bc;
    border-radius: 2px;
    transition: all 0.3s;
}

.sp-header .openbtn1 span:nth-child(1) { top: 2px; }
.sp-header .openbtn1 span:nth-child(2) { top: 9px; }
.sp-header .openbtn1 span:nth-child(3) { top: 16px; }

@media screen and (max-width: 768px){
.pc-scroll-menu-btn.is-visible {
    top: 2px;
    opacity: 1;
    visibility: visible;
}
.pc-scroll-menu-btn {
    position: fixed;
    top: -100px;
    right: 10px;
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    cursor: pointer;
}	
	}

.page-heading-business {
		color:#fff;
    width: 100%;
    height: 231px;
    position: relative;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(/wp-content/uploads/message_head_bg.jpg);
	  display: flex;
  justify-content: center;
  align-items: center;
font-size: 42px;
    font-weight: bold;
}

@media (max-width: 768px) {

.page-heading-business {
    color: #fff;
    width: 100%;
    height: 120px;
    position: relative;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(/wp-content/uploads/message_head_bg.jpg);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    font-weight: bold;
    line-height: 1.5;
}
}	

.my-post-box {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 24px;
    border-bottom: solid 1px #ccc;
    padding: 16px 8px 16px;
}

.my-post-date {
    text-align: right;
    font-size: 14px;
    line-height: 1.2;
    color: #888;
    min-width: 60px;
    padding-right: 12px;            /* 線と余白 */
    border-right: 1px solid #ddd;   /* ← これが縦線 */
}

.my-post-date .year {
    display: block;
    font-size: 14px;
}

.my-post-date .date {
    display: block;
    font-size: 16px;
}

.my-post-title a {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
}

.my-post-title a:hover {
    text-decoration: underline;
}

    .testimonial-section {
      padding:40px 0;
    }

    .testimonial-card {
      background:#fff;
      border-radius:12px;
      box-shadow:0 4px 15px rgba(0,0,0,0.06);
      padding:28px 26px;
      height:100%;
    }

    .testimonial-header {
      display:flex;
      align-items:center;
      margin-bottom:20px;
    }

    .testimonial-photo {
      width:96px;
      height:96px;
      border-radius:50%;
      object-fit:cover;
      flex-shrink:0;
    }

    .testimonial-meta span {
      display:inline-block;
      font-size:12px;
      font-weight:700;
      margin-bottom:6px;
      border-radius:999px;
      padding:3px 10px;
    }

    .label-year {
      background:#ffb347;
      color:#fff;
    }

    .label-role {
      background:#00b894;
      color:#fff;
    }

    .label-sub {
      background:#f1f2f6;
      color:#57606f;
    }

    .testimonial-name {
      font-size:20px;
      font-weight:700;
      margin-top:4px;
    }

    .testimonial-title {
      font-size:13px;
      color:#555;
      margin-bottom:0;
    }

    .testimonial-body {
      font-size:14px;
      line-height:1.75;
      color:#444;
    }

    /* 蛍光ペン風マーカー */
    .marker {
      background:linear-gradient(transparent 60%, #ffe9a3 60%);
    }

    @media (max-width: 767.98px) {
      .testimonial-card {
        padding:22px 18px;
      }
      .testimonial-header {
        flex-direction:unset;
        align-items:flex-start;
      }
      .testimonial-meta {
        margin-top:12px;
      }
		.testimonial-header	img{
			width:35%;
		}
		.testimonial-meta{
			line-height:1.2;
		}
    }


   .teacher-profile {
      max-width: 1000px;
      margin: 40px auto;
    }
    .profile-card {
      background: #ffffff;
      border-radius: 16px;
      overflow: hidden;
    }
    .profile-header {
background : linear-gradient(to right, #e6bc1b 1%, #fd520c 100%);
      color: #fff;
      padding: 20px 24px;
    }
    .prof_midashi{
      font-size: 24px;
      margin: 0;
      font-weight: 700;
		line-height:1.5;
    }
    .profile-header small {
      opacity: .9;
    }
    .profile-img {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      object-fit: cover;
      border: 4px solid #fff;
      box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    }
    .info-label {
      font-size: 12px;
      letter-spacing: .08em;
      color: #999;
      text-transform: uppercase;
    }
    .info-value {
      font-size: 15px;
      font-weight: 600;
      color: #333;
    }
    .badge-title {
      display: inline-block;
      padding:2px 14px;
      border-radius: 999px;
      font-size: 11px;
      letter-spacing: .12em;
      text-transform: uppercase;
      margin-bottom: 0px;
    }
    .badge-red   { background:#008CBA; color:#fff; }
    .badge-gray  { background:#008CBA; color:#fff; }
    .badge-yellow{ background:#008CBA; color:#fff; }

    .question-block {
      background: #f9fafb;
      border-radius: 12px;
      padding: 16px 18px;
      margin-bottom: 16px;
    }
    .question-title {
      font-weight: 700;
      font-size: 14px;
      margin-bottom: 6px;
    }
    .question-text {
      font-size: 14px;
      line-height: 1.8;
      color: #4b5563;
      margin-bottom: 0;
    }
    .small-note {
      font-size: 11px;
      color: #9ca3af;
      margin-bottom: 8px;
    }

    @media (max-width: 767.98px) {
      .profile-header {
        text-align: center;
      }
      .profile-img {
        margin-bottom: 12px;
      }
    }

/* ===== Yoast Breadcrumb デザイン ===== */
#breadcrumbs {
  font-size: 14px;
  color: #555;
  padding: 8px 12px;
  display: inline-block;
}

/* パンくず内のリンク */
#breadcrumbs a {
  color: #0073aa;
  text-decoration: none;
  transition: color 0.3s;
}

#breadcrumbs a:hover {
  color: #005177;
  text-decoration: underline;
}

/* 区切り文字（› や → など） */
#breadcrumbs .separator {
  margin: 0 6px;
  color: #aaa;
}

/* 現在ページ部分 */
#breadcrumbs span:last-child {
  color: #333;
}

/* 全体 */
.message-content {
  display: grid;
  gap:8px;
  margin-top: 30px;
}

/* カード全体 */
.qanda {
  background: #fff;
  border-radius: 12px;
  padding: 20px 24px;
  transition: all 0.3s ease;
  border: 1px solid #f0f0f0;
}

/* 質問タイトル */
.q-title {
  font-weight: 700;
  font-size: 17px;
  color: #333;
  margin-bottom: 10px;
  position: relative;
  padding-left: 34px;
}

.q-title::before {
  content: "Q";
  position: absolute;
  left: 0;
  top: 2px;
  color: #fff;
  background:#2d82bc;
  font-weight: 700;
  font-size: 15px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 回答部分 */
.answer-content {
  padding-left: 34px;
  color: #555;
  font-size: 15px;
  line-height: 1.8;
}

/* 強調 */
.answer-content strong {
  color:#2d82bc;
}

@media (max-width: 768px) {
.answer-content {
  padding-left:unset;
  color: #555;
  font-size: 15px;
  line-height: 1.8;
}
#breadcrumbs {
  font-size: 11px;
}
}

.flow-section {
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 20px 10px;
}


@media (max-width: 768px) {
.flow-section {
  max-width: 1120px;
  margin: 0 auto;
  padding: 20px 20px 10px;
}
}

.flow-title {
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 32px;
}

.flow-steps {
  display: flex;
  flex-wrap: wrap;
  gap:8px;
  justify-content: space-between;
}

.flow-step {
  position: relative;
  flex: 1 1 200px;
  min-width: 200px;
  background: #fff;
  border-radius: 10px;
  border: 2px solid #e5e5e5;
  overflow: hidden;
}

/* 青いSTEPラベル */
.flow-step-label {
  position: absolute;
  top: 0;
  left: 0;
  background: #2d82bc;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  border-bottom-right-radius: 8px;
}

/* カード内全体 */
.flow-step-inner {
  padding: 60px 20px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* アイコン */
.flow-step-icon {
  width: 140px;
  height: 140px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: #fff6e0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flow-step-icon img {
  max-width:90%;
  height: auto;
}

/* タイトルと説明文 */
.flow-step-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

.flow-step-text {
  font-size: 14px;
  line-height: 1.7;
    margin-bottom: 0;	
}

/* → の矢印（PC のときのみ） */
.flow-step::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -18px;
  transform: translateY(-50%);
  border-left: 18px solid #d4e5ff;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
}

.flow-step:last-child::after {
  display: none;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .flow-steps {
    flex-direction: column;
  }
  .flow-step {
    width: 100%;
	  flex: 1 1 180px;
  }
  .flow-step::after {
    display: none;
  }

  /* ← ここでスマホ時は2カラム表示に切り替え！ */
  .flow-step-inner {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    text-align: left;
    padding: 40px 16px;
  }

  .flow-step-icon {
    width: 100px;
    height: 100px;
    margin: 0;
    flex-shrink: 0;
  }

  .flow-step-text {
    font-size: 13px;
  }
	
	.flow-step-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.seisekiup{
	font-size:40px;
}

.voice-section {
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 20px 60px;
}

.voice-title {
  text-align: center;
  font-size:32px;
  font-weight: 700;
  margin-bottom: 8px;
}

.voice-sub {
  text-align: center;
  font-size: 14px;
  color: #777;
  margin-bottom: 32px;
}

/* カードのグリッド */
.voice-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

/* 個別カード */
.voice-item {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e7e7e7;
  box-shadow: 0 4px 8px rgba(0,0,0,0.03);
  padding: 20px 18px;
  position: relative;
}


/* 上段：アイコン＋名前ブロック */
.voice-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

/* アイコン丸 */
.voice-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #e7f2ff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.voice-icon img {
  width:100%;
  height: auto;
}

/* 名前など */
.voice-name {
  font-size: 15px;
  font-weight: 700;
}

.voice-meta {
  font-size: 12px;
  color: #888;
}

/* コメント本文 */
.voice-text {
  font-size: 16px;
  line-height: 1.8;
  margin-top: 4px;
}

/* ★レーティング（任意で） */
.voice-stars {
  font-size: 12px;
  color: #f4a600;
  margin-top: 4px;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .voice-list {
    grid-template-columns: 1fr;
  }
  .voice-item {
    padding: 16px 14px;
  }
  .voice-item::after {
    left: 32px;
  }
.voice-section {
  padding: 40px 20px 0px;
}	
}