/*========================================
型は決まっているけどそのサイトで微調整するもの系

　●　サイト基本定義
　●　横幅設定
　●　上へ
　●　シンプルモジュール類
　●　スライドで全体表示
　●　電話番号リンク対策
　●　続きを見る（readmore）

========================================*/

/*========================================
　●　サイト基本定義
========================================*/
:root{
 --main-green: #4cac26;
 --main-yegreen: #9de183;

 --main-yellow: #ffea00;
 --main-blue: #009ce6;
 --main-pink: #f95f71;
 --main-orange: #f77908;

 --main-textcolor: #232f31;
 --main-cream: #faf8f0;

 --main-skyblue: #47bbec;
}

body{ overflow: hidden; color: var(--main-textcolor);}

main{
 padding-top: calc(116px);
 background: url("../images/bgdeco/deco_wave01_top.png") repeat-x center top;
}

main.main_p01{ padding-top: 116px;}
main.main_p02{ padding-bottom: 100px;}
main.main_p03{ padding-bottom: 100px;}
main.main_p04{ padding-bottom: 100px;}
main.main_p05{ padding-bottom: 100px;}
main.main_p06{ padding-bottom: 100px;}
main.main_p07{ padding-bottom: calc(100px - 56px);}
main.main_p08{ padding-bottom: 100px;}

.kiwi{ font-family: 'Kiwi Maru','Noto Sans JP', sans-serif;}

/*============================== ■ max-width 1087 */
@media screen and (max-width: 1087px){}/*----- media -----*/

/*============================== ■ max-width 767 */
@media screen and (max-width: 767px){
main{
 padding-top: calc(58px + 16px);
 background-size: 960px;
}

}/*----- media -----*/

/*============================== ■ max-width 520 */
@media screen and (max-width: 520px){}/*----- media -----*/

/*========================================
　●　横幅設定
========================================*/
.m-mainwidth750{
 width: 100%;
 max-width: 750px;
 margin-left: auto;
 margin-right: auto;
}

.m-mainwidth750__space{
 width: 100%;
 max-width: 766px;
 margin-left: auto;
 margin-right: auto;
 padding-right: 8px;
 padding-left: 8px;
}

.m-mainwidth1080{
 width: 100%;
 max-width: 1080px;
 margin-left: auto;
 margin-right: auto;
}

.m-mainwidth1080__space{
 width: 100%;
 max-width: 1096px;
 margin-left: auto;
 margin-right: auto;
 padding-right: 8px;
 padding-left: 8px;
}

.m-mainwidth1212{
 width: 100%;
 max-width: 1212px;
 margin-left: auto;
 margin-right: auto;
}

.m-mainwidth1212__space{
 width: 100%;
 max-width: 1228px;
 margin-left: auto;
 margin-right: auto;
 padding-right: 8px;
 padding-left: 8px;
}

.m-mainwidth1280{
 width: 100%;
 max-width: 1280px;
 margin-left: auto;
 margin-right: auto;
}

.m-mainwidth1280__space{
 width: 100%;
 max-width: 1296px;
 margin-left: auto;
 margin-right: auto;
 padding-right: 8px;
 padding-left: 8px;
}

.m-mainwidth1400{
 width: 100%;
 max-width: 1400px;
 margin-left: auto;
 margin-right: auto;
}

.m-mainwidth1400__space{
 width: 100%;
 max-width: 1416px;
 margin-left: auto;
 margin-right: auto;
 padding-right: 8px;
 padding-left: 8px;
}

/*========================================
　●　上へ
========================================*/
#js-toTOP{
 display: none;
 position: fixed;
  bottom: 32px;
  right: 0px;
  z-index: 500;
 font-size: 1.8rem;
}

#js-toTOP a{ transition: all 0.3s ease-out;}
#js-toTOP a:hover{ opacity: 0.4;}

/*============================== □ max-width xxx */
@media screen and (max-width: 1280px){
#js-toTOP{ width: 60px;}
#js-toTOP img{ width: 100%;}

}/*----- media -----*/

/*============================== ■ max-width 1087 */
@media screen and (max-width: 1087px){}/*----- media -----*/

/*============================== ■ max-width 767 */
@media screen and (max-width: 767px){
#js-toTOP{
 display: none;
 position: fixed;
  bottom: 60px;
  right: -12px;
  z-index: 500;
 font-size: 1.8rem;
}

#js-toTOP img{
 width: 80%;
}

}/*----- media -----*/

/*========================================
　●　シンプルモジュール類
========================================*/
.m-gmap{
 width: 100%;
 max-width: 1096px;
 height: 420px;
 margin-bottom: 16px;
 margin-left: auto;
 margin-right: auto;
 padding-left: 8px;
 padding-right: 8px;
}

.m-zei{
 padding-bottom: 8px;
 text-align: right;
}

a.m-banner{ transition: all 0.3s ease-out;}
a.m-banner:hover{ opacity: 0.6;}

/*----- HP移転 */
.hpiten{
 padding-bottom: 20px;
 padding-left: 16px;
 padding-right: 16px;
 line-height: 1;
 text-align: center;
}

.hpiten p{
 width: fit-content;
 margin-left: auto;
 margin-right: auto;
 background: var(--main-yellow);
 border-radius: 16px;
}

.hpiten a{
 display: block;
 padding: 12px 18px;
 text-decoration: none;
}



/*========================================
　●　スライドで全体表示（ベース）
========================================*/
.sp_attention{
 display: none;
 width: 100%;
 padding-bottom: 20px;
 padding-left: 8px;
 padding-right: 8px;
 color: #ff4040;
 text-align: center;
}

/*============================== □ max-width xxx */
@media screen and (max-width: 750px){/* クエリ幅は調整,セレクタ等追加で個別指定 */
/*
.overflowWrap{
 display: block;
 overflow-x: scroll;
 white-space: nowrap;
 -webkit-overflow-scrolling: touch;
 border-right: 2px solid #333333;
}
.sp_attention{
 display: block;
}
*/

}/*----- media -----*/

/*========================================
　●　電話番号リンク対策
========================================*/
.nolink{}
.nolink a{
 display: inline-block;
 color: var(--main-textcolor) !important;
 pointer-events: none !important;
 text-decoration-line: none !important;
}

/*========================================
　●　続きを見る（readmore）
========================================*/
/*----- readmore */
.readmore{
 position: relative;
 margin: 0px auto 0;
 padding-bottom: 75px;
}

.readmore label{
 position: absolute; left: 50%; bottom: 0; z-index: 1;
 display: table;
 width: 200px;
 margin: 0 auto;
 padding: 10px 0;
 color: #fff;
 cursor: pointer;
 text-align: center;
 background-color: var(--main-green);
 border-radius: 18px;
 transform: translateX(-50%);
}

.readmore label::before{
 content: '続きを見る';
}

.readmore input[type="checkbox"]:checked ~ label::before {
 content: '元に戻す';
}

.readmore input[type="checkbox"]{
 display: none;
}

.readmore-content {
 position: relative;
 height: 240px;
 overflow: hidden;
}

.readmore input[type="checkbox"]:checked ~ .readmore-content{
 height: auto;
}


.readmore-content::before {
 position: absolute; bottom: 0; left: 0;
 display: block;
 content: "";
 width: 100%;
 height: 75px;
 background: linear-gradient( rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, #fff 100%);
}

.readmore input[type="checkbox"]:checked ~ .readmore-content::before {
  display: none;
}