/*タグに指定する所*/
h1,h2,h3,button,header li,a{
    /* font-family:"メイリオ',Zen Kaku Gothic"; */
    font-family:"メイリオ",'Meiryo', Arial, Helvetica, sans-serif;
    font-weight: 700;
}

.zen-kaku-gothic-new-regular {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 400;
    font-style: normal;
  }

#keyvisual{
    box-sizing: 100%;
}

#keyvisual p{
    font-family:'メイリオ', 'Meiryo', sans-serif;
    font-weight: 700;
}

html{
    font-size: 62.5%;
}

body{
    font-family:"メイリオ",'Meiryo', Arial, Helvetica, sans-serif;
    font-size: 1.6rem;
    line-height:1.625;
    color: #1a1a1a;
    box-sizing : border-box;
    counter-reset: number 0;
    background-color: #fff;
}

.request{
    margin-top: 30px;
    text-align: center;}

a{
    text-decoration: none;
}

a:visited,header a{
    color: #3FA5CC;
}

em{
    color: #F20D0D;
}

footer a:visited{
    color: #fff;
}


button{
    border: 0;
    padding: 10px 20px;
    border-radius:10px;
    background-color: #fff; 
    height: 2.5em;       
}


p:not([class]), p[class*=mod_link_01], p[class=align_c], p[class=align_l], p[class=align_r] {
    margin-bottom: 20px;
}

p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}


[class^=mod_list]>li [role=button], [class^=mod_list]>li a[href], [class^=mod_list]>li button, [class^=mod_tbl] td>[role=button], [class^=mod_tbl] td>a[href], [class^=mod_tbl] td>button, [class^=mod_tbl] th>[role=button], [class^=mod_tbl] th>a[href], [class^=mod_tbl] th>button, [class^=mod_txt_] [role=button], [class^=mod_txt_] a[href], [class^=mod_txt_] button, p:not([class]) [role=button], p:not([class]) a[href], p:not([class]) button {
    text-decoration: underline;
}

.btn_w:hover,.btn_b:hover,#campaign img:hover,.plink li:hover,#pagetop:hover{
    opacity: 0.5;
    transition: .3s;
}

.btn_w path{
    fill: #4158D0;
}

#campaign img{
    margin: 0 auto ;
    border:#3FA5CC 1px solid;

}

button svg,#top_inquiry svg{
    padding-right: 0.7em;
}

h1{
    font-size: 20px;
}

h2{
    font-size: 35px;
    /*color: #fff;
    text-shadow:
                 1px 1px 0 #1a1a1a,
               -1px 1px 0 #1a1a1a,
               1px -1px 0 #1a1a1a,
               -1px -1px 0 #1a1a1a,
               3px 3px 0 #D0FFF1,
               3px  3px 2px #fff,
               -3px  3px 2px #fff,
               3px -3px 2px #fff,
               -3px -3px 2px #fff,
               3px  0px 2px #fff,
               0px  3px 2px #fff,
               -3px  0px 2px #fff,
               0px -3px 2px #fff;  */
    padding: 0;
    width: 100%;
    margin: 0 auto 50px;
    position: relative;
    line-height: 5rem;
/*
    color: #00BCD4;
    text-shadow: 2px 2px #fff, 5px 5px rgba(0, 188, 212, 0.4);*/
    color: #fff;
    text-shadow: 1px 1px 1px #555, -1px 1px 1px #555, 1px -1px 1px #555, -1px -1px 1px #555, 1px 1px 1px #555, -1px 1px 1px #555, 1px -1px 1px #555, -1px -1px 1px #555, 5px 5px #00ce90;
  }


.h2_waku>div{
    width: 100%;
    padding: 0 20px;
}

/* p, li{
    font-size: 14px;
} */

.long_text p,
.long_text ul{
    margin-bottom: 1em;
}

.long_text p:last-child,
.long_text ul:last-child{
    margin-bottom: 0;
}

/*全体に関わるcss*/

.h2_waku{
    border: 2px solid #1a1a1a;
    border-top: 2px solid #fff;
    border-radius: 0px 0px 15px 15px; 
    text-align: center;
    position: relative;
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 100px;
    margin: 0 auto 150px;
    z-index: 0;
}

.h2_waku::before{
    position: absolute;
    z-index: -2;
    content: "";
    width: 110%;
    height: 200px;
    background-color: #fff;
    top: -1%;
    left: -5%;
}

.h2_waku::after{
    position: absolute;
    z-index: -1;
    content: "";
    width: 100%;
    height: 200px;
    top: 50px;
    left: -2px;
    border-right: 2px solid #1a1a1a;
    border-left: 2px solid #1a1a1a;
    border-top: 2px solid #1a1a1a;
    box-sizing: content-box;
    border-radius: 15px 15px 0 0;
}

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

.align_r{
    text-align: right; !important
}

.align_l{
    text-align: left; !important
}

.w_10 {
    width: 10% !important;
}

.w_20 {
    width: 20% !important;
}

.w_30 {
    width: 30% !important;
}

.w_40 {
    width: 40% !important;
}

.w_50 {
    width: 50% !important;
}

.w_60 {
    width: 60% !important;
}

.w_70 {
    width: 70% !important;
}

.w_80 {
    width: 80% !important;
}

.w_90 {
    width: 90% !important;
}

.w_100 {
    width: 100% !important;
}


@media only screen and (max-width: 812px) {
    .table_type1 _scroll {
        width: auto;
        overflow: auto;
    }
}

@media only screen and (max-width: 812px) {
    .table_type1 {
        margin-bottom: 15px;
        font-size: 1.4rem;
    }
}


.table_type1 table{
    margin: 0 auto;
    border: #000 3px solid;
}

.table_type1 th{
    background-color: #EDE5DF;
}

.table_type1 th, .table_type1 td{
    padding: 10px 20px;
    border: #000 1px solid;
}

.row{
    background-color: #D2F8EB;
}

.middle{
    background-color: #D5F8D2;
}

.high{
    background-color: #F8F6D3;
}

.h2_waku h2 span{
    background-color: #fff;
    padding: 0px 10px;
}

.st_line h3,#c_menu #single h4, .hdg_h3{
    padding: 0.8rem 0 0;
    margin-bottom: 50px;
    /*margin-bottom: 0.2rem;*/
    background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(166, 254, 224, 1) 10px, rgba(166, 254, 224, 1) 20px );
    background-repeat: no-repeat;
    background-size: 60% 13px;
    background-position: bottom;
    /*
    background-color: rgba(255, 255, 255, 1);*/
    text-align: center;
    font-weight: bold;
    font-size: 20px;
}

._img1 img{
    margin: 0 auto;
}

.column2{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

}

.column2 > div{
    width:50%;
}

.column2 > section{
    width:45%;
}



.r_reverse{
    flex-flow: row-reverse;
}

.btn_b{
    background: rgb(63,165,204);
    background: linear-gradient(90deg, rgba(63,165,204,1) 0%, rgba(45,198,184,1) 100%);
    color: #fff;
}

.btn_b a{
    color: #fff;
}

.btn_w{
    display: inline-block;
    background: linear-gradient(90deg, rgba(63,165,204,1) 0%, rgba(45,198,184,1) 100%);
    background: -webkit-linear-gradient(0deg, #4158D0, #2DC6B8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
}

h1,h2,h3,footer,#keyvisual p{
    text-align: center;
}

h2 + p,h3 + p{
    text-align: center;
    margin-bottom: 50px;
  }

footer,footer a{
    color: #fff;
}

.container{
    width: 1100px;
    margin: 0 auto;
}

#keuvisual,footer{
    width: 100%;
}

.keycolor1{
    color: #3FA5CC ;
}

.keycolor2,.reason_fukidashi, #qa h3{
    color: #21BB9D ;
}


header nav ul li{
    float: left;

}

header nav ul li a,footer nav ul li a{
    position: relative;
    padding: 0 0 0 1em;
    margin: 0;
    transition: .3s;
}


header nav ul li a::before,footer nav ul li a::before{
    position: absolute;
    left: 0;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: '\f0da';
}


header nav ul li a:hover{
    background:linear-gradient(transparent 60%, #FFFCD7 60%);
}

footer nav ul li a:hover{
    background:linear-gradient(transparent 60%, #CBEB7F 60%);
}


.balloon2-left{
    margin: 1.5em 0 1.5em 15px;
    padding: 7px 10px;
    
    position: relative;
    display: inline-block;
    color: #1a1a1a;
    background: #FFF;
    border: solid 3px #1a1a1a;
    box-sizing: border-box;
    border-radius: 10px;
    text-align: left;
    margin: 0;
    padding: 20px;
  }
  
.balloon2-left::before{
    content: "";
    position: absolute;
    top: 50%;
    left: -24px;
    margin-top: -12px;
    border: 12px solid transparent;
    border-right: 12px solid #FFF;
    z-index: 2;
  }
  
 .balloon2-left:after{
    content: "";
    position: absolute;
    top: 50%;
    left: -30px;
    margin-top: -14px;
    border: 14px solid transparent;
    border-right: 14px solid #1a1a1a;
    z-index: 1;
  }
  

  .balloon2-right,.qa_box .r_reverse>div:last-child{
    margin: 1.5em 15px 1.5em 0;
    padding: 7px 10px;

    position: relative;
    display: inline-block;
    color: #1a1a1a;
    background: #FFF;
    border: solid 3px #1a1a1a;
    box-sizing: border-box;
    border-radius: 10px;
    text-align: left;
    margin: 0;
    padding: 20px;
  }

  
  .balloon2-right::before,.qa_box .r_reverse>div:last-child::before{
    content: "";
    position: absolute;
    top: 50%;
    right: -24px;
    margin-top: -12px;
    border: 12px solid transparent;
    border-left: 12px solid #FFF;
    z-index: 2;
  }
  
  .balloon2-right::after,.qa_box .r_reverse>div:last-child::after{
    content: "";
    position: absolute;
    top: 50%;
    right: -30px;
    margin-top: -14px;
    border: 14px solid transparent;
    border-left: 14px solid #1a1a1a;
    z-index: 1;
  }
  
  .balloon p,.balloon h3{
    margin: 0;
    padding: 20px;
  }


table{
    border-collapse: collapse;
}

  .table_base,
  .table_base  td,
  .table_base  th{
    border: 2px solid #1a1a1a;
	border-collapse: collapse;
  }

  .table_base{
    width: 80%;
    margin: 0 auto;
  }

  .table_base  td,
  .table_base  th{
    padding:10px;
    text-align: left;
  }

  .table_base th{
    background-color: #C9EEE3;
    width: 20%;
  }


  .ECM_RadioInput {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  .ECM_RadioInput:hover {
    background: rgba(33,187,157,0.05);
  }
  .ECM_RadioInput-Input {
    opacity: 0;
    width: 0;
    margin: 0;
  }
  .ECM_RadioInput-Input:focus + .ECM_RadioInput-DummyInput {
    border: solid 2px #555;
    background: #fff;
  }
  .ECM_RadioInput-Input:checked + .ECM_RadioInput-DummyInput {
    border: solid 2px #555;
  }
  .ECM_RadioInput-Input:checked + .ECM_RadioInput-DummyInput::before {
    content: "";
    display: inline;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #21BB9D;
  }
  .ECM_RadioInput-DummyInput {
    position: relative;
    top: 0;
    left: 0;
    display: inline;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: solid 2px #888;
  }
  .ECM_RadioInput-LabelText {
    margin-left: 12px;
    display: inline;
    font-size: 16px;
  }


  .ECM_CheckboxInput {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  .ECM_CheckboxInput-Input {
    margin: 0;
    width: 0;
    opacity: 0;
  }

  .ECM_CheckboxInput:hover {
    background: rgba(33,187,157,0.05);
  }

  .ECM_CheckboxInput:hover > .ECM_CheckboxInput-DummyInput{
    background: #C9EEE3;
  }
  .ECM_CheckboxInput-Input:focus + .ECM_CheckboxInput-DummyInput{
    background: #C9EEE3;
  }
  .ECM_CheckboxInput-Input:checked + .ECM_CheckboxInput-DummyInput {
    background: #36A780;
  }
  .ECM_CheckboxInput-Input:checked + .ECM_CheckboxInput-DummyInput::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 35%;
    height: 2px;
    transform: translate(-2px, 2px) rotateZ(-135deg);
    transform-origin: 1px 1px;
    background: #FFFFFF;
  }
  .ECM_CheckboxInput-Input:checked + .ECM_CheckboxInput-DummyInput::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    height: 2px;
    transform: translate(-2px, 2px) rotateZ(-45deg);
    transform-origin: 1px 1px;
    background: #FFFFFF;
  }
  .ECM_CheckboxInput-DummyInput {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    width: 16px;
    height: 16px;
    background: #fff;
    border: 2px solid #555;

  }
  .ECM_CheckboxInput-LabelText {
    margin-left: 12px;
    display: block;
    font-size: 16px;
  }

  #form .check{
    border-top: 2px dotted #555;
    margin-top: 30px;
    padding-top: 30px;
  }

  #form .yubin{
    padding: 2px 10px;
    margin-top: 1em;
  }

#form .f_w100{
    width: 100%;
}

#form textarea{
    width: 100%;
    height: 5em;
}

/*ファーストフードビューに関連するcss*/

header{
    height: 90px;
    display: flex;
    align-items: center;
}

.sp{
    display: none;
}

.logo{
    width: 290px;
}

.logo img{
    width: 195px;
    height: 58px;
}



header nav div{
    display: flex;
    justify-content: flex-end;
    width: 800px;
}

header li {
    padding-top: 10px;
    padding-bottom: 10px;
    color: #3FA5CC;
}

header li ,footer li{
    margin-right: 25px;
}


#index #keyvisual{
    background-image: url(../img/bg_cloud.png),linear-gradient(180deg, rgba(63,165,204,1) 45%, rgba(186,236,227,1) 53%);
    background-repeat: repeat-x;
    background-color: #000;
    height: 593px;
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    width: 100%;
}


.h1_back{
    background-image: url(../img/top.png);
    background-repeat: no-repeat;
    background-position:top center;
    width: 900px;
    height: 457px;
    margin: 0 auto 25px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.h1_fx{
    color: #fff;
    height: 407px;
}

.h1_fx img,.h1_fx h1{
    text-shadow: 0px 0px 5px #5f4d3c;
}


.h1_back div:nth-child(2) img{
    width: 317px;
    height: 91px;
    filter: brightness(1000%);
    margin: 120px auto 25px;
}


/*ページ内リンク*/

.plink{
    margin-bottom: 200px;
}

.plink nav{
    margin: 0 auto;
    text-align: center;
}

.plink ul{
    margin-top: 120px;
    display: flex;
    justify-content: space-between;
    list-style: none;
    
}

.plink li{
    background-color: #AADDF1;
    border-radius: 20px;
    margin-left: 1em;
    padding: 10px 20px;
    position: relative;
}

.plink li:first-child{
    margin-left: 0px;
}

.plink li:nth-child(2){
    filter: hue-rotate(-20deg);    
}

.plink li:nth-child(3){
    filter: hue-rotate(-40deg);    
}

.plink li:nth-child(4){
    filter: hue-rotate(-60deg);    
}

.plink li:nth-child(5){
    filter: hue-rotate(-80deg);    
}

.plink li:nth-child(6){
    filter: hue-rotate(-100deg);    
}

.plink li:nth-child(7){
    filter: hue-rotate(-120deg);    
}

.plink li:nth-child(8){
    filter: hue-rotate(-140deg);    
}

.plink li::before{
    content: "";
    position: absolute;
    top: 120%;
    left: 50%;
    margin-left: -7px;
    border: 7px solid transparent;
    border-top: 7px solid #AADDF1;
}


.plink li ::after{
    content: '\f219''＿''\f219';
    position: absolute;
    top: -25%;
    left: 50%;
    margin-left: -20px;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #AADDF1;
}

.plink li a{
    color: #1a1a1a;
}

.plink li a:hover{
    color: #1a1a1a;
}

.plink li a:active{
    color: #fff;
}

.plink li a:visited{
    color: #1a1a1a;
}


/*空き情報*/
#calendar iframe{
    margin: 0 auto 50px;
    width: 950px;
    height: 400px;
}

/*選ばれる理由*/
.select{
    display: flex;
    justify-content:space-around;
}

.select .reason{
    width: 30%;
}

.reason_fukidashi{
    border: 3px solid #1a1a1a;
    padding: 20px;
    position: relative;
    display: inline-block;
    background: #fff;
    box-sizing: border-box;
}
.reason_fukidashi::before{
    content: "";
    position: absolute;
    bottom: -24px;
    left: 50%;
    margin-left: -15px;
    border: 12px solid transparent;
    border-top: 12px solid #fff;
    z-index: 2;
}

.reason_fukidashi::after{
    content: "";
    position: absolute;
    bottom: -30px;
    left: 50%;
    margin-left: -17px;
    border: 14px solid transparent;
    border-top: 14px solid #1a1a1a;
    z-index: 1;
}




.reason_fukidashi h3::before {
    font-size: 38px;
    color: #fff;
    background-color: #21BB9D;
    padding: 3px 15px 0px;
    margin-right: 10px;
    margin-bottom: 20px;
    border-top: #21BB9D 10px solid;
  }


#select .reason h3{
    position: relative;
    text-align: left;
    
  }



#select .reason h3::before{
    counter-increment: number 1; /* counter-resetの名前を指定、+1づつ増やす。*/
    content: counter(number);
    display: block;
    position: absolute;
    left: 0; 
    top:-50px;
    width: 50px;
    text-align: center;
    padding:5px 2px;
    background-color: #21BB9D;
    color: #fff;
  }


.reason{
    text-align: left;
}

.reason .reason_text{
    width: 277px;
    margin:0 auto;
}



.reason strong,.reason b{
    background:linear-gradient(transparent 70%, #FFFCD7 70%);
}

.reason li,#area li,#location li{
    list-style-type: disc;
    list-style-position: inside;
}


.reason img{
    text-align: center;
    margin: 10px auto 30px;
    width: 277px;
    height: 152px;
    object-fit: cover;
}

/*ハウスクリーニングメニュー*/

#c_menu .midasi{
    display: flex;
    align-items: center;
    margin: 0 auto 50px;
    width: 80%;
}


#c_menu section img{
    width: 260px;
    height: 140px;
    object-fit: cover;
    border: 1px solid #6c6c6c;
    padding: 3px;
    background-color: #fff;
}

#c_menu .midasi div img{
    width: 350px;
    height: 188px;
    object-fit: cover;
    padding: 5px;
    border: #6c6c6c solid 1px;
    background-color: #fff;
}


#c_menu .balloon1-left h3,#c_menu .midasi>div:nth-child(2) p,#c_menu .midasi>div:nth-child(2) h3{
    text-align: left;
  }

#c_menu .balloon1-left h3,#c_menu .midasi>div:nth-child(2) h3{
    font-size: 22px;
  }

#c_menu .balloon1-left span,#c_menu .midasi>div:nth-child(2) h3 span{
    font-size: 16px;
  }

.balloon1-left, #c_menu .midasi>div:nth-child(2){
    position: relative;
    display: inline-block;
    margin: 1.5em 0 1.5em 15px;
    padding: 20px 20px;
    min-width: 120px;
    max-width: 100%;
    font-size: 16px;
    background: #EDE5DF;
    border-radius: 15px;
  }
  
  .balloon1-left:before, #c_menu .midasi>div:nth-child(2)::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -30px;
    margin-top: -15px;
    border: 15px solid transparent;
    border-right: 15px solid #EDE5DF;
  }
  
  .balloon1-left p, #c_menu .midasi>div:nth-child(2) p {
    margin: 0;
    padding: 0;
  }


#c_menu section h4+p{
    text-align: center;
    margin-bottom: 50px;
}

#c_menu .column2 section:nth-child(n+3){
    margin-top: 50px;
}

#c_menu .column3{
    display: flex;
    justify-content: space-between;
}

#c_menu .column3 section{
    width: 30%;
}


#c_menu .c_menu{
    margin-bottom: 200px;
}

#c_menu .c_menu section{
	padding: 30px;
	position: relative;
}

#c_menu .c_menu section{
	padding: 30px;
	position: relative;
}


#c_menu .c_menu section::before,#c_menu .c_menu section::after {
	content: '';
	width: 125px;
	height: 125px;
	position: absolute;
}

#c_menu .c_menu section::before {
	border-left: solid 2px #6c6c6c;
	border-top: solid 2px #6c6c6c;
	top: 0;
	left: 0;
}

#c_menu .c_menu section::after {
	border-right: solid 2px #6c6c6c;
	border-bottom: solid 2px #6c6c6c;
	bottom: 0;
	right: 0;
}


#c_menu .c_menu h5,#c_menu .c_menu h4{
	color: #29aac2;
    font-size: 18px;
    margin-bottom: 30px;
}

#c_menu .c_menu section div{
	position: relative;
    width: 260px;
    margin:0 auto 30px auto;
}

#c_menu .c_menu section div img{
    margin:0 auto;
}

#c_menu .c_menu section div ul{
	position: absolute;
    bottom: 5px;
    left: 0;
}

#c_menu .c_menu section div li{
	color: #fff;
    background: linear-gradient(to bottom, rgba(54, 167, 128, 0) 15%, rgba(54, 167, 128, 0.8) 15%, rgba(54, 167, 128, 0.8) 0%);
    padding: 2px 10px 0px 25px;
    position: relative;
}

#c_menu .c_menu section div li:first-child::before{
	position: absolute;
    left: 3px;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: '\f51a';
    color: #fff;
}

#c_menu .c_menu section div li:nth-child(2)::before{
	position: absolute;
    left: 3px;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: '\f017';
    color: #fff;
}

#c_menu h6{
	color: #36A780;
    font-size: 16px;
    font-weight: 700;
    margin-top: 30px;
}

#c_menu .c_menu section>ul>li{
	position: relative;
    padding-left: 25px;
    line-height: 200%;
}

#c_menu .c_menu section>ul>li span{
    border-bottom: 2px dotted #EDE5DF;
}

#c_menu .c_menu section>ul>li::before{
	position: absolute;
    left: 3px;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: '\e4cf';
    color: #36A780;
}

#c_menu{
    margin-bottom: 150px;
}

/*エリアに関するcss*/
#area section,
#greeting section{
    margin-bottom: 100px;
}

#area section:last-child,
#greeting section:last-child{
    margin-bottom: 0px;
}


#area .column2,
#greeting .column2,
#location .column2 {
    background-color: #EDE5DF;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 20px;
    width: 80%;
    margin: 0 auto;
}


#area .column2 img{
    margin: 0 auto;
    width: 100%;
}

#area .column2 ul{
    column-count: 3;
}

#area .column2 li{
    text-align: left;
}


#area .r_reverse ul{
    margin-left: 20px;
}

/*口コミに関するcss*/

#voice section{
    margin-bottom: 70px;
}

#voice section:last-child{
    margin-bottom: 0;
}

#voice .v_box{
    width:80%;
    margin: 0 auto;
    display: flex;
    align-items: center;
}


#voice .icon{
    background-color: #C9EEE3 !important;
    width: 150px !important;
    height: 150px !important;
    margin: 0 auto !important;
    position: relative !important;
}


#voice .icon img{
    width: 150px;
    margin: 0 auto;
    max-inline-size: 150px;
    block-size: auto;
}

#voice .icon p {
    position: absolute;
    top:140px;
    left:0.5rem;
}

#voice .icon p span{
    background-color: #25B180;
    color: #fff;
    padding-left: 1.5em;
    padding-right: 0.5em;
    position: relative;
    display: inline;
    font-size: small;
    z-index: 2;
}


#voice .icon p span::before{
    position: absolute;
    padding-left: 0.5em;
    left: 0;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: '\f007';
  }

/*QAに関するcss*/


#qa .countup{
    counter-reset: q_rank a_rank;
  }


#qa .countup h3,.countup p:first-child{
    position: relative;
  }


#qa .countup h3{
    padding-left: 50px;
  }

#qa .countup h3::before{
    counter-increment: q_rank;
    content: "Q."counter(q_rank);
    display: block;
    position: absolute;
    left: 0; 
    top:-35px;
    width: 50px;
    text-align: center;
    padding:5px 2px;
    background-color: #21BB9D;
    color: #fff;
  }

#qa .countup p:first-child::before{
    counter-increment: a_rank;
    content: "A."counter(a_rank);
    display: block;
    position: absolute;
    left: 0; 
    top:-35px;
    width: 50px;
    text-align: center;
    padding:7px 2px 7px 2px;
    background-color: #3FA5CC;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
  }

#qa .qa_box{
    width: 878px;
    margin: 0 auto;

}

#qa .qa_box p{
    padding-left: 55px;

}

.qa_box>section>div:nth-child(even){
    flex-flow: row-reverse;
}

#qa .r_reverse>div:last-child{
    width: 645px;
  }

#qa .balloon2-left{
    width: 645px;
}

.qa_box section div:first-child{
    margin-bottom: 15px;
}

.qa_box section{
    margin-bottom: 100px;
}

.qa_box section:last-child{
    margin-bottom: 0;
}

#qa .qa_box,#qa h3{
    text-align: left;
    font-size: 16px;
}

#qa .qa_box section>div{
    display: flex;
    align-items: center;
}


#qa .qa_box section>div div:first-child{
    width: 80px;
    height: 80px;
    background-color: #21BB9D;
}

#qa .r_reverse div:first-child{
    width: 80px;
    height: 80px;
    background-color: #3FA5CC !important;
}


/*ページ下部お問い合わせに関するcss*/
#top_inquiry{
    font-family:'メイリオ', 'Meiryo', sans-serif;
    font-weight: 700;
    margin-bottom: 50px;
}

#top_inquiry .column2 div,#top_inquiry .column2 div table{
    text-align: center;
    margin: 0 auto;
}

#top_inquiry .column2 div table{
    margin-bottom:40px;
}

#top_inquiry tr{
    height: 50px;
}

#top_inquiry th{
    font-size: 20px;
}

#top_inquiry td{
    font-size: 30px;
}


#top_inquiry .column2{
    margin: 0 auto;
    width: 80%;
}

/*フッターに関するcss*/
footer{
    background-size: auto auto;
    background-color: rgba(99, 194, 176, 1);
    background-image: repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(115, 199, 183, 1) 10px, rgba(115, 199, 183, 1) 20px );
    padding-top: 60px;
    padding-bottom: 25px;
}

.w_logo{
    margin: 0 auto;
    width: 195px;
    filter: brightness(1000%);
    margin-bottom: 35px;
}

footer nav ul{
    display: flex;
    justify-content: center;
    margin-bottom: 3em;
}

footer nav ul li{
    display: inline;
}

footer nav button{
    margin-bottom: 50px;
}

footer nav button path{
    fill:#4158D0;
}

.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
 
.clearfix:before {
    content: "";
	display: block;
	clear: both;
}
 
.clearfix {
	display: block;
}

/*スクロールボタンに関するcss*/

#pagetop {
    position: fixed;
    bottom: 40px;
    right: 22px;
    margin: 0;
    width: 85px;
    height: 85px;
    border-radius: 50%;
    line-height: 85px;
    background: linear-gradient(#27CFB3, #3EA5CC);
    color:white;
    padding: 0;
    text-align: center;
  }

  #pagetop p a{
    display: block;
    color: #fff;
  }

  #pagetop p a:hover{
    color: #fff;
  }

  #pagetop p :visited{
    color: #fff;
  }

  #pagetop p{
    font-weight: 700;
    position: relative;
  }

  #pagetop p::before{
    position: absolute;
    content: '\f0d8';
    top:-20px;
    left: 45%;    
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 16px;
  }

  #pagetop p::after{
    width: 2em;
    height: 20px;
    line-height: 30px;
    position: absolute;
    content: '\00a0\00a0\00a0\f1b0\f1b0\00a0\00a0\00a0\00a0\f1b0';
    white-space: pre-wrap;
    top:-100px;
    left: 30%;    
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 16px;
    color: #AAF1D9;
  }

/*company*/

#company #keyvisual,#form #keyvisual{
    position: relative;    
    background-size: cover;
    width: 100%;
    height: 300px;
    margin: 0 auto;
}

#company #keyvisual{
    background-image: url(../img/company/company_main.jpg);
    background-color: rgb(105, 130, 175);
}

#form #keyvisual{
    background-image: url(../img/form/form_main.jpg);
    background-color: rgb(175, 133, 105);
}

#company #keyvisual::before,
#form #keyvisual::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /*半透明のフィルターをかける*/

}

#company #keyvisual .h1_back2,#form #keyvisual .h1_back2{
    position: absolute;
    margin: 0 auto;
    width: 1100px;
    margin-top: 40px;
}

#company #keyvisual h1,
#form #keyvisual h1,
#company #keyvisual p,
#form #keyvisual p{
    color: #fff;
    padding-left: 20px;
    padding-right: 20px;
}

#company #keyvisual p{
    margin-top: 1em;
}
  

.form_01{
    margin-bottom: 50px;
}

.origin{
    background-color:#21BB9D;
    height: 250px;
}

.origin img{
    margin-top: 90px;
}

#greeting .column2 p,
#location p,
#location li{
        margin-right: 20px;
        text-align: left;
}

#greeting  .r_reverse p{
    margin-left: 20px;
}

#character>p{
    margin-bottom: 50px;
    
}

#character .character {
    display: flex;
    width: 80%;
    margin: 0 auto;
    justify-content: space-around;
    
}

#character .character div{
    width: 48%;
    background-color: #EDE5DF;
    border-radius: 10px;
    padding: 20px;
    
}

#character .character div:last-child{
    margin-left: 0;
    
}


#character .character div img{
    margin: 0 auto;
    
}

/*所在地*/
#location iframe{
    width: 100%;
    height: 250px;
}

#location li{
    text-indent: -1.5em;
    padding-left: 1.5em;
}

#form #keyvisual{
    margin-bottom: 100px;
}

#form #form_inquiry th span{
    color: #F20D0D;
    font-weight: 400;
    padding-left: 1em;
}

#form table{
    margin-bottom: 50px;
}

#form #form_inquiry td{
    line-height: 200%;
}


/* #form #form_inquiry h3{
    text-align: left;
} */

#form #form_inquiry th span::before{
    content: "※";
}

#form #form_inquiry .day{
    text-decoration: underline;
    padding-left: 1em;
}

#form #form_inquiry .day::before{
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f073";
}



  @media screen and (max-width:1100px){
    header {
        display: block;
        align-items: center;
        height: auto;
    }

    header nav{
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin: 20px auto;
    }

    header nav div {
        display: flex;
        justify-content: center;
        width: 90%;
        margin: 0 auto;
    }

    header nav img{
        max-inline-size: 80%;
    }

    .container{
        width: 100%;
        padding: 0 20px;
    }


    .logo {
        text-align: center;
        margin: 0 auto;
        width: 7em;
    }


    .logo img{
        width: 7em;
    }
    


    .h1_back{
        background-image: url(../img/top.png);
        background-repeat: no-repeat;
        background-position:top center;
        /*width: 590px;*/
        width: 100%;
        height: 457px;
        margin: 0 auto 25px;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
    }

    .h1_back div:nth-child(2) img{
        width: 317px;
        height: 91px;
        margin: 120px auto 25px;
    }


    .plink ul {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        
    }

    .plink ul li{
        width: 48%;
        margin-left: 0px;
        margin-bottom: 40px;
    }
    
    .select .reason{
        width: 30%;
    }


    #calendar iframe{
        margin: 0 auto 50px;
        width: 80%;
        height: 400px;
    }


    #select .select{
        display: block;
        margin: 0 auto;
      }
    
    .select .reason{
        width: 80%;
        margin: 0 auto 100px;
    }

    .select .reason:last-child{
        margin-bottom: 0;
    }

    #select .reason h3::before{
        counter-increment: s_rank;
        content: counter(s_rank);
        display: block;
        position: absolute;
        left: 0; 
        top:-50px;
        width: 50px;
        text-align: center;
        padding:5px 2px;
        background-color: #21BB9D;
        color: #fff;
      }

      .reason .reason_text{
        width: 100%;
        margin:0 auto;
    }
    
    .reason img{
        text-align: center;
        margin: 10px auto 30px;
        width: 277px;
        height: 152px;
        object-fit: cover;
    }

    #c_menu .midasi{
        display: flex;
        align-items: center;
        margin: 0 auto 50px;
        width: 80%;
    }
        
    
    .h2_waku::before{
        position: absolute;
        z-index: -2;
        content: "";
        width: 102%;
        height: 200px;
        background-color: #fff;
        top: -1%;
        left: -1%;
    }

    #c_menu .column2,#c_menu .column3{
        flex-wrap: wrap;
    }
    
    #c_menu .column3 section, #c_menu .column2 section{
        width: 50%;
    }


    #c_menu .column3 section:nth-child(n+3) {
        margin-top: 50px;
    }
    #c_menu .c_menu section::before,#c_menu .c_menu section::after {
        content: '';
        width: 125px;
        height: 125px;
        position: absolute;
    }


    #area .column2 ul {
        column-count: 2;
    }

    #qa .qa_box{
        width: 80%;
        margin: 0 auto;
    
    }

    #qa .countup h3,#qa .countup p {
        padding-top: 10px;
        padding-left: 0;
    }

    #qa .qa_box section>div div:first-child {
        width: 80px;
        height: auto;
        background-color: #21BB9D;
    }

    #qa .r_reverse>div:last-child{
        width: 645px;
      }
    
    #qa .balloon2-left{
        width: 645px;
    }

    #top_inquiry .column2 {
        display: block;
    }

    #top_inquiry .column2 img{
        margin-bottom: 50px;
        margin: 0 auto ;
    }

    #top_inquiry .column2 > div {
        width: 100%;
    }

    #company #keyvisual .h1_back2, #form #keyvisual .h1_back2 {
        position: absolute;
        margin: 0 auto;
        top:0;
        left: 0;
        width:100%;
        margin-top: 40px;
    }
  }


  @media screen and (max-width:640px){
    .sp{
        display: block;
    }

    .pc{
        display: none;
    }

    header{
        position: relative;
    }

    header #nav_btn {
        position: fixed;
        top: 10px;
        right: 0;
        padding: 10px 20px;
        z-index: 9999;
        background: rgba(63, 165, 204, .5);
    }

    header #nav_btn path{
        width: 35px;
        height: 35px;
        fill: #fff;

    }


    header .menu_btn0{        display: block;    }
    header .menu_btn1{        display: none;    }

    header.nav_open .menu_btn0{        display: none !important;    }
    header.nav_open .menu_btn1{        display: block;    }

    header nav{
        float: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        padding: 20px 0;
        background: rgba(255,255,255,.9);
        /*background: rgba(63,165,204,.8);*/
        z-index: 9998;
        margin: 0;
        display: block;
        text-align: center;
        display: none;
    }

    header nav ul{
        display: block;
        margin-bottom: 50px;
    }
    header nav ul li {
        float: none;
        margin-right: 0;
        font-size: 20px;
    }

    header nav div{
        margin-top:30vh;
        width: 100%;
        display: block;

    }


    header nav ul a{
        padding: 20px;
        margin: 0;
        text-align: center;
    }

    #index #keyvisual{
        height: 400px;
    }

	#top_inquiry table th,
	#top_inquiry table td{
		display: block;
        height: 1.5em;
	}

	

    .logo {
        width: 7em;
    }


    .logo img{
        width: 7em;
    }
    
    h1 {
        font-size: 0.5em;
    }

    h2 {
        font-size: 1.5em;
            }

    .h1_back{
        background-image: url(../img/top.png);
        background-repeat: no-repeat;
        background-position:top center;
        background-size:contain;
        width: 100%;
        height: 300px;
        margin: 0 auto 25px;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
    }

    .h1_fx {
        height: 300px;
    }

    .h1_back div:nth-child(2) img{
        width: 317px;
        height: 91px;
        filter: brightness(1000%);
        margin: 50% auto 5%;
    }


    
    .column2 > div {
        width: 100%;
    }

    .plink ul {

        display: block;
    }

    .plink ul li{
        width: 100%;
        margin-left: 0px;
        margin-bottom: 40px;
    }
    
    .select .reason{
        width: 30%;
    }

    #calendar iframe{
        margin: 0 auto 50px;
        width: 80%;
        height: 400px;
    }


    #select .select{
        display: block;
        margin: 0 auto;
      }
    
    .select .reason{
        width: 80%;
        margin: 0 auto 100px;
    }

    .select .reason:last-child{
        margin-bottom: 0;
    }

    #select .reason h3::before{
        counter-increment: s_rank;
        content: counter(s_rank);
        display: block;
        position: absolute;
        left: 0; 
        top:-50px;
        width: 50px;
        text-align: center;
        padding:5px 2px;
        background-color: #21BB9D;
        color: #fff;
      }


      .reason .reason_text{
        width: 100%;
        margin:0 auto;
    }
    
    .reason img{
        text-align: center;
        margin: 10px auto 30px;
        width: 277px;
        height: 152px;
        object-fit: cover;
    }

    #c_menu .midasi{
        display: flex;
        align-items: center;
        margin: 0 auto 50px;
        flex-wrap: wrap;
        width: 90%;
    }
    
    #c_menu .midasi div{
        text-align: center;
        margin: 0 auto;
    }

    

    .balloon1-left:before, #c_menu .midasi>div:nth-child(2)::before {
        display: none;
    }

    .balloon1-left, #c_menu .midasi>div:nth-child(2) {
        margin: 1.5em 0 1.5em 0;
    }
    
    .h2_waku::before{
        position: absolute;
        z-index: -2;
        content: "";
        width: 102%;
        height: 200px;
        background-color: #fff;
        top: -1%;
        left: -1%;
    }

    h2+p,.h2_waku+h3{
        margin-left: 1em;
        margin-right: 1em;
    }


    #c_menu .column2,#c_menu .column3{
        flex-wrap: wrap;
    }
    
    #c_menu .column3 section, #c_menu .column2 section{
        width: 100%;
    }

    #c_menu .column3 section,#c_menu .column2 section{
        margin-bottom: 50px;
    }

    #c_menu .column3 section:nth-child(n+3),#c_menu .column2 section:nth-child(n+3) {
        margin-top: 0px;
        margin-bottom: 0px;
    }
    #c_menu .c_menu section::before,#c_menu .c_menu section::after {
        content: '';
        width: 125px;
        height: 125px;
        position: absolute;
    }

    
    #area .column2 {
        display: flex;
        flex-direction: column-reverse;
    }

    #area .column2 img{
        margin-bottom: 20px;
    }

    #area .column2 ul {
        column-count: 2;
    }

    #voice .v_box {
        display: block;
        width: 90%;
    }

    #voice .balloon2-right::before,#voice .qa_box .r_reverse>div:last-child::before,
    #voice .balloon2-right::after,#voice  .qa_box .r_reverse>div:last-child::after ,
    #voice .balloon2-left:after,
    #voice .balloon2-left::before     {
        display: none;
    }

  

    #qa .qa_box{
        width: 100%;
        margin: 0 auto;
    
    }

    #qa .countup h3,#qa .countup p {
        padding-top: 10px;
        padding-left: 0;
    }

    #qa .qa_box section>div div:first-child {
        width: 80px;
        height: auto;
        background-color: #21BB9D;
    }

    #qa .r_reverse>div:last-child{
        width: 90%;
      }
    
    #qa .balloon2-left{
        width: 90%;
    }

    #top_inquiry .column2 {
        display: block;
    }


    #top_inquiry .column2 img{
        margin-bottom: 50px;
    }

    #top_inquiry .column2 > div {
        width: 100%;
    }
  

    #pagetop p {
        top: -10px;
    }

    #pagetop p a{
        display: block;
    }
    

    #pagetop {
        width: 50px;
        height: 50px;
    }

    #pagetop p::before {
        top: -15px;
        left: 40%;
    }

    .table_base th,.table_base td{
        display: block;
        width: 100%;
        border-bottom: 2px solid #1a1a1a;
        border-right: none;
        border-left: none;
        border-top: none;
    }

    .table_base{
        border-bottom: 0;
    }

    #greeting .column2>img:first-child{
        margin-top: 0;
    }

    #greeting .column2 p, #location p, #location li {
        margin-right: 0px;
    }

    #greeting .column2{
        flex-direction: column-reverse;
        flex-wrap: wrap;
    }

    #greeting .column2 div:nth-child(1){
        padding-top: 1em;
    }
    
    #greeting .r_reverse p {
        margin-left: 0px;
    }

    #character .character div{
        width: 90%;
        margin: 0 auto;
        box-sizing: border-box;
    }  

    #character .character {
        display: block;
        width: 100%;
    }

    #character .character div:last-child {

        margin: 50px auto 0;
    }
    
}