@charset "UTF-8";
/* CSS Document */

/* --------------------------------
    サイトベースカラー設定
-------------------------------- */
:root {
    --main-color: #EF857D;
    --sub-color: #EF857D;
    --light-color: #C1D57F;
    --gray-text: #727171;
    --bg-gray: #EFEFEF;
    --bg-color: #FEF1ED;
}

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



PC表示用スタイル



======================================================================================================== */
/*------------------------------------
    表示・非表示切り替え
------------------------------------*/
.pc-nav{ display: block; }
.sp-nav{ display: none; }

/*------------------------------------

    共通部分のスタイル

------------------------------------*/
*{ box-sizing: border-box; }

a{ transition: 0.5s; }

html{
    font-size: 62.5%;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight: 300;
}

body{
    width: 100%;
    font-feature-settings: "palt";
    position: relative;
    overflow-x: hidden;
    background: #fff;
    z-index: 0;
}

p{
    font-size: 1.6rem;
    line-height: 1.7;
    text-align: justify;
    font-weight: 400;
}

img{
    width: 100%;
}

header,nav,main,footer{ display: block; }

.translate{
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.translate-Y{
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.translate-X{
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

/*---------------------------------------------------------------------

    ▼▼スクーロールで表示される隠れヘッダー
    
---------------------------------------------------------------------*/
.header-hidden{
    width: 100%;
    background: rgba(255,255,255,0.9);
    position: fixed;
    top: 0;
    z-index: 9;
}

.header-hidden .header-wrap{
    width: 90%;
    height: 60px;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
}

.header-hidden .header-wrap h3{
    width: 120px;
}

.header-hidden .header-wrap h3 img{
    width: 100%;
}

.hidden-nav{
    width: auto;
}

.hidden-nav ul{
    width: 100%;
    margin: 0 auto;
    justify-content: center;
    flex-wrap: wrap;
}

.hidden-nav ul li a{
    display: block;
    font-size: 1.5rem;
    text-align: center;
    color: var(--gray-text);
    padding-left: 30px;
}


/*---------------------------------------------------------------------

    ▼▼ヘッダー内のスタイル
    
---------------------------------------------------------------------*/
header{
    width: 100%;
    position: relative;
    z-index: 10;
}

.header-wrap{
    width: 90%;
    margin: 0 auto;
    justify-content: left;
    align-items: center;
}

.header-wrap h1{
    width: 250px;
}

.header-wrap h1 img{
    width: 100%;
}

/*--------- 問い合わせボタン ---------*/
.contact-link-btn ul{
    position: absolute;
    top: 0; right: 20px;
}

.contact-link-btn ul li{
    justify-content: center;
    align-items: center;
    background: var(--light-color);
    margin-left: 10px;
    transition: 0.3s;
    border-radius: 0 0 10px 10px;
}

.contact-link-btn ul li:last-of-type{
    background: var(--sub-color);
}

.contact-link-btn ul li a{
    font-size: 1.8rem;
    line-height: 1.5;
    text-align: center;
    font-weight: bold;
    color: #fff;
    padding: 10px 15px 5px;
}

.contact-link-btn ul li:hover{
    opacity: 0.7;
}

.contact-link-btn ul li a span{
    display: block;
    font-size: 1.5rem;
    border-top: solid 1px #fff;
    margin-top: 3px;
    padding: 3px 0 0 0;
}

.contact-link-btn ul li a .fa-phone,
.contact-link-btn ul li a .fa-envelope{
    margin-right: 7px;
}

/*------------------------------------------------
    ▼▼ナビ部分のスタイル    
-------------------------------------------------*/
.pc-nav{
    width: 100%;
    background: var(--main-color);
}

.pc-nav ul{
    width: 100%;
    margin: 0 auto;
    justify-content: center;
    flex-wrap: wrap;
}

.pc-nav ul li a{
    display: block;
    font-size: 1.7rem;
    text-align: center;
    color: #fff;
    padding: 15px 35px;
}

.pc-nav ul li a:hover{
    background: var(--gray-text);
    color: #fff;
    border: #fff;
}

/*---------------------------------------------------------------------

    ▼▼TOP画像部分のスタイル
    
---------------------------------------------------------------------*/
.top-image{
    width: 100%;
    height: calc(100vh - 160.33px);
    position: relative;
    background-image: url(../img/top.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.top-image h2{
    width: 100%;
    /*font-family: serif;*/
    font-size: 4.5rem;
    letter-spacing: 0.2em;
    text-align: center;
    line-height: 1.5;
    font-weight: 700;
    position: absolute;
    top:50%;
    color: #000;
}

.top-image h2 span{
    color: #ec6d65;
    font-weight: 700;
}

.yokoku{
    position: absolute;
    top:32%;
    left: 50%;
}

.yokoku p{
    font-size: 4rem;
    line-height: 1;
    letter-spacing: 0.1em;
    text-align: center;
    font-weight: bold;
    background: var(--main-color);
    color: #fff;
    padding: 12px 25px;
    border-radius: 20px;
    white-space: nowrap;
}

.insta-banner{
    width: 240px;
    position: absolute;
    left: 40px;
    bottom: 40px;
}

.insta-banner img{
    width: 100%;
    transition: 0.5s;
}

.insta-banner img:hover{
    transform:  scale(1.05);
}

/*----------------------------------------------------------------------

    ▼▼メインコンテンツ部分のスタイル
    
---------------------------------------------------------------------*/
/*------------------------------------------------
    ▼▼各項目共通のスタイル   
-------------------------------------------------*/
.sub-section1,
.sub-section2,
.sub-section3,
.sub-section4,
.sub-section5{
    width: 100%;
    position: relative;
    padding: 70px 0;
    background: #fff;;
}

.section-inner{
    width: 1000px;
    margin: 0 auto;
}

/*-- 各コンテンツのタイトル --*/
.content-title{
    font-size: 4rem;
    font-weight: bold;
    letter-spacing: 0.3em;
    text-align: center;
    color: /*#595757;*/#000;
    position: relative;
    margin-bottom: 60px;
}

.content-title::first-letter{
    color: var(--sub-color);
}

.content-title::after{
    content: '';
	position: absolute;
	bottom:-20px;
	left:50%;
	width:40px;
	height: 3px;
	background: var(--sub-color);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

/*------------------------------------------------
    ▼▼1つ目のセクション内のスタイル   
-------------------------------------------------*/
.sub-section1{
    background: var(--bg-color);
    padding-top: 50px;
}

/*------- ごあいさつ -------*/
.greeting-box{
    width: 1000px;
    margin: 0 auto;
    padding: 30px 46px;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 0 8px lightgray;
}

.greeting-box h2{
    /*font-family: serif;*/
    font-weight: bold;
    font-size: 2.6rem;
    border-bottom: solid 1px var(--main-color);
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.greeting-box h2::first-letter{
    color: var(--sub-color);
}

.bold{
    font-weight: bold;
    color: #ec6d65;
}

/*------------------------------------
    シェアボタンを表示する際に使用
------------------------------------*/
.tw-share{ 
    width: 320px;
    margin: 40px auto 0;
}

.tw-share p{
    font-size: 2rem;
    font-weight: bold;
    color: var(--gray-text);
    text-align: center;
    letter-spacing: 0.05em;
    margin-bottom: 15px;
}

.tw-share p span{
    margin: 0 5px;
}

.tw-share ul{
    width: 100%;
    justify-content: space-around;
}

.tw-share ul li{
    justify-content: center;
    align-items: center;
    border: solid 1.5px var(--main-color);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    transition: 0.5s;
}

.tw-share li a{
    display: block;
    font-size:2.5rem;
    color: var(--main-color);
}

.tw-share ul li:hover{
    background: var(--main-color);
}

.tw-share ul li:hover a{
    color: #fff;
}

/*はてぶのロゴを擬似要素で代用*/
.fa-hatena:before {
    content: "B!";
    font-family: Verdana;
    font-weight: bold;
}

/*------------------------------------------------
    ▼▼2つ目のセクション内のスタイル    
-------------------------------------------------*/
.sub-section2 ul{
    width: 100%;
    margin: 0 auto;
}

.sub-section2 ul li{
    height: 450px;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
}

.sub-section2 ul li .number{
    font-size: 12rem;
    color: /*#F6DADB*/#E4E4E5;
    letter-spacing: 0.1em;
    position: absolute;
    z-index: 0;
    font-weight: 700;
}

.sub-section2 ul li:nth-child(odd) .number{
    top: -40px; left: 10px;
}

.sub-section2 ul li:nth-child(even) .number{
    top: -40px; right: 10px;
}

.sub-section2 ul li:nth-child(odd){
    flex-direction: row-reverse;
}

.service-photo{
    width: 50%;
}

.service-photo img{
   object-fit: cover;
   height: 450px;
}

.service-text{
    width: 50%;
    justify-content: center;
    align-items: center;
    background: #fff;
}

.service-text div{
    width: 70%;
    padding: 30px 20px;
    position: relative;
    z-index: 1;
}

.service-text h3{
    font-weight: bold;
    font-size: 2.5rem;
    color: var(--sub-color);
    border-bottom: solid 1px var(--main-color);
    padding-bottom: 10px;
    margin-bottom: 10px;
}

/*------ サブコンテンツ内の問い合わせリンク ------*/
.sub-link-btn{
    display: block;
    margin: 50px auto 0;
    text-align: center;
}

.sub-link-btn a{
    display: inline-block;
    text-align: center;
    font-size: 2.5rem;
    letter-spacing: 0.1em;
    color: #fff;
    background: var(--light-color);
    padding: 15px 30px;
    border-radius: 30px;
}

.sub-link-btn a .fa-envelope{
    margin-right: 8px;
}

.sub-link-btn a:hover{
    background: var(--main-color)
}

/*------------------------------------------------
    ▼▼3つ目のセクション内のスタイル   
-------------------------------------------------*/
.sub-section3{
    background: var(--bg-color);
}

.sub-section3 ul{
    width: 800px;
    margin: 0 auto;
    flex-direction: column;
    flex-wrap: wrap;
}

.sub-section3 ul li{
    width: 100%;
    margin-top: 40px;
}

.sub-section3 ul li:first-of-type{
    margin-top: 0;
}

.sub-section3 ul li img{
    width: 100%;
    filter: drop-shadow(0px 0px 4px lightgray);
}

.flow{
    width: 800px;
    margin: 50px auto 0;
    padding: 60px 0;
    background: #fff;
}

.flow-img{
    width: 70%;
    margin: 0 auto;
}

.flow-img img{
    width: 100%;
}

/*------------------------------------------------
    ▼▼4つ目のセクション内のスタイル    
-------------------------------------------------*/
.sub-section4{
    width: 100%;
}

.sub-section4 table{
    width: 800px;
    margin: 30px auto 30px;
}

.sub-section4 table tr{
    width: 100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    border-bottom: solid 1px gray;
}


.sub-section4 table tr:last-of-type{
    border-bottom: none;
}

.sub-section4 table th{
    width: 25%;
    font-size: 2rem;
    font-weight: bold;
    background: var(--bg-color);
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sub-section4 table td{
    width: 75%;
    font-size: 1.8rem;
    line-height: 1.7;
    padding: 25px 30px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: left;
    align-items: center;
}

.googlemap{
    width: 800px;
    height: 0;
    overflow: hidden;
    padding-bottom: 35%;
    position: relative;
    margin: 0 auto;
    z-index:0;
}

.googlemap iframe{
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

.line-banner{
    width: 800px;
    margin: 0 auto 60px;
}

.line-banner a{
    display: block;
    transition: 0.5s;
}

.line-banner a:hover{
    opacity: 0.8;
}

.line-banner img{
    width: 100%;
}


/*------------------------------------------------
    ▼▼5つ目のセクション内のスタイル   
-------------------------------------------------*/
.sub-section5{
    background: var(--bg-color);
}

/* その他の項目は「form-style.css」に記述 */

/*---------------------------------------------------------------------

    フッター内のスタイル
    
---------------------------------------------------------------------*/
footer{
    width: 100%;
    background: #fff;
    padding: 20px 0 0;
    color: var(--gray-text);
    text-align: center;
}

footer h2{
    font-size: 1.6rem;
    margin-bottom: 12px;
}

footer p{
    font-size: 1.4rem;
    line-height: 1.5;
    text-align: center;
}

small{
    background: var(--main-color);
    color: #fff;
    width: 100%;
    display: block;
    font-size: 1.3rem;
    padding: 8px;
    margin-top: 18px;
}

/*------------------------------------------------
    ▼▼TOPに戻るボタン   
-------------------------------------------------*/
.back-btn{
    position: fixed;
    right: 20px; bottom: 20px;
    z-index: 5;
}

.back-btn a{
    display: block;
    font-size: 3rem;
    color: gray;
    background: rgba(255,255,255,0.8);
    border-radius: 8px;
    width: 50px;
    height: 50px;
    position: relative;
    box-shadow: 0 0 5px gray;
}

.back-btn a span{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.back-btn a:hover{
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

/*-----------------------------------------------------------------------
    ハンバーガーメニュー
-----------------------------------------------------------------------*/
#nav-drawer {
    /*アイコンの位置*/
    position: fixed;
    position: -webkit- fixed;
    top:12px;
    right:25px;
    display: block;
    z-index: 999;
}

/*チェックボックス等は非表示に*/
.nav-unshown { display:none; }

/*アイコンのスペース*/
#nav-open {
    display: inline-block;
    width: 60px;
    height: 60px;
    /*background: rgba(255,255,255,0.7);*/
    vertical-align: middle;
    position: relative;
    position: -webkit-relative;
    z-index: 9999;
} 

#nav-open::before{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f0c9";
    color: var(--main-color);
    font-size: 3.5rem;
    position: absolute;
    position: -webkit-absolute;
    top: 50%; left: 50%;
    -webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

#nav-input:checked + #nav-open{ transition: .3s ease-in-out; }

#nav-input:checked + #nav-open::before{ content: "\f00d"; color: var(--main-color); }


/*閉じる用の薄黒カバー*/
#nav-close {
    display: none;/*はじめは隠しておく*/
    position: fixed;
    z-index: 99;
    top: 0;/*全体に広がるように*/
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
    overflow: auto;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9997;/*最前面に*/
    max-width: 100%;/*最大幅*/
    width: 40%;
    height: 100%;
    background-color: var(--bg-color);/*背景色*/
    transition: .3s ease-in-out;/*滑らかに表示*/
    -webkit-transform: translateX(-105%);
    transform: translateX(105%);/*右に隠しておく*/
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
    display: block;/*カバーを表示*/
    opacity: .5;
}

#nav-input:checked ~ #nav-content {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);/*中身を表示*/
    box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

/*チェックボックス中の囲み*/
.nav-content-inner{
    width: 80%;
    margin: 0px auto 0;
}

/*ナビ内リスト項目*/
.sp-menu{
    margin-top: 17px;
    text-align: center;
}

.sp-menu-li a{
    color: var(--main-color);
    font-weight: bold;
    position: relative;
    display: block;
    transition: .3s;
}

.sp-menu-li{
    font-size:2.5rem;
    font-weight: bold;
    margin-bottom: 30px;
    padding-bottom: 30px;
    color: var(--main-color);
    border-bottom: dotted 1px var(--main-color);
}

.sp-menu-li:last-of-type{
    border-bottom: none;
}

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



メディアクエリ//タブレット表示用スタイル



======================================================================================================== */
@media screen and (min-width:571px) and (max-width:859px){
/*------------------------------------
    表示・非表示切り替え
------------------------------------*/
.pc-nav{ display: block; }
.sp-nav{ display: none; }
/*------------------------------------

    共通部分のスタイル

------------------------------------*/
/*---------------------------------------------------------------------

    ▼▼スクーロールで表示される隠れヘッダー
    
---------------------------------------------------------------------*/
.header-hidden .header-wrap{
    height: 55px;
}

.header-hidden .header-wrap h3{
    width: 110px;
}

.hidden-nav ul li a{
    font-size: 1.4rem;
    padding-left: 25px;
}
/*---------------------------------------------------------------------

    ▼▼ヘッダー内のスタイル
    
---------------------------------------------------------------------*/
.header-wrap{
    width: 90%;
}

.header-wrap h1{
    width: 150px;
}


/*--------- 問い合わせボタン ---------*/
.contact-link-btn ul{
    position: absolute;
    top: 0; right: 0;
}

.contact-link-btn ul li{
    margin-left: 5px;
    border-radius: 0 0 8px 8px;
}

.contact-link-btn ul li a{
    font-size: 1.6rem;
    padding: 7px 10px 3px;
}

.contact-link-btn ul li a span{
    font-size: 1.3rem;
    margin-top: 3px;
    padding: 3px 0 0 0;
}

.contact-link-btn ul li a .fa-phone,
.contact-link-btn ul li a .fa-envelope{
    margin-right: 5px;
}

/*------------------------------------------------
    ▼▼ナビ部分のスタイル    
-------------------------------------------------*/
.pc-nav ul{
    width: 100%;
    justify-content: space-around;
}

.pc-nav ul li a{
    display: block;
    font-size: 1.6rem;
    padding: 12px 30px;
}

/*---------------------------------------------------------------------

    ▼▼TOP画像部分のスタイル
    
---------------------------------------------------------------------*/
.top-image{
    height: 60vh;
}

.top-image h2{
    font-size: 3rem;
    top: 50%;
}

.yokoku{
    top:32%;
}

.yokoku p{
    font-size: 2.8rem;
    padding: 10px 20px;
    border-radius: 20px;
}

.insta-banner{
    width: 190px;
    left: 30px;
    bottom: 30px;
}


/*----------------------------------------------------------------------

    ▼▼メインコンテンツ部分のスタイル
    
---------------------------------------------------------------------*/
/*------------------------------------------------
    ▼▼各項目共通のスタイル   
-------------------------------------------------*/
.sub-section1,
.sub-section2,
.sub-section3,
.sub-section4,
.sub-section5{
    padding: 50px 0;
}

.section-inner{
    width: 90%;
}

/*-- 各コンテンツのタイトル --*/
.content-title{
    font-size: 3.2rem;
    letter-spacing: 0.3em;
    margin-bottom: 45px;
}

.content-title::after{
	bottom:-20px;
	left:50%;
	width:40px;
	height: 3px;
}

/*------------------------------------------------
    ▼▼1つ目のセクション内のスタイル   
-------------------------------------------------*/
.sub-section1{
    padding-top: 0;
}

/*------- ごあいさつ -------*/
.greeting-box{
    width: 100%;
    padding: 20px 30px;
    box-shadow: none;
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);

}

/*------- ごあいさつ下画像部分 -------*/
.photo-link{
    width: 100%;
    margin: 0 auto 0;
}

.photo-link li{
    width: 50%;
    margin-top: 0px;
}

.slide-text{
    font-size: 1.8rem;
    -webkit-transform: translateY(104%);
    -ms-transform: translateY(104%);
    transform: translateY(104%);
}


/*------------------------------------------------
    ▼▼2つ目のセクション内のスタイル    
-------------------------------------------------*/
.sub-section2 ul{
    width: 90%;
    margin: 0 auto;
}

.sub-section2 ul li,
.sub-section2 ul li:nth-child(odd){
    height: auto;
    flex-direction: column;
    margin-top: 50px;
}

.sub-section2 ul li .number{
    font-size: 10rem;
    letter-spacing: 0;
}

.sub-section2 ul li:nth-child(odd) .number,
.sub-section2 ul li:nth-child(even) .number{
    top: 270px; left: -15px;
}

.service-photo{
    width: 100%;
}

.service-photo img{
   height: 350px;
}

.service-text{
    width: 100%;
}

.service-text div{
    width: 100%;
    padding: 20px 15px 0;
}


/*------ サブコンテンツ内の問い合わせリンク ------*/
.sub-link-btn{
    margin: 30px auto 0;
}


/*------------------------------------------------
    ▼▼3つ目のセクション内のスタイル   
-------------------------------------------------*/
.sub-section3 ul{
    width: 80%;
}

.sub-section3 ul li{
    width: 100%;
    margin-top: 20px;
}

.sub-section3 ul li img{
    width: 100%;
    filter: drop-shadow(0px 0px 4px lightgray);
}

.sub-section3 ul li:first-of-type{
    margin-top: 0;
}

.sub-section3 ul li div{
    width: 100%;
    padding: 20px 30px;
}

.flow{
    width: 80%;
    margin: 40px auto 0;
    padding: 40px 0;
    background: #fff;
}

.flow-img{
    width: 80%;
    margin: 0 auto;
}

.flow-img img{
    width: 100%;
}
/*------------------------------------------------
    ▼▼4つ目のセクション内のスタイル    
-------------------------------------------------*/
.sub-section4{
    width: 100%;
}

.sub-section4 table{
    width: 90%;
    margin: 30px auto 40px;
}

.sub-section4 table th{
    width: 25%;
    font-size: 1.8rem;
}

.sub-section4 table td{
    width: 75%;
    font-size: 1.6rem;
    padding: 20px 25px;
}

.googlemap{
    width: 90%;
    padding-bottom: 50%;
}

.line-banner{
    width: 90%;
}


/*------------------------------------------------
    ▼▼5つ目のセクション内のスタイル   
-------------------------------------------------*/
.sub-section5{
    background: var(--bg-color);
}

/* その他の項目は「form-style.css」に記述 */

/*---------------------------------------------------------------------

    フッター内のスタイル
    
---------------------------------------------------------------------*/
footer{
    width: 100%;
    background: #fff;
    padding: 20px 0 0;
    color: var(--gray-text);
    text-align: center;
}

footer h2{
    font-size: 1.6rem;
    margin-bottom: 12px;
}

footer p{
    font-size: 1.4rem;
    line-height: 1.5;
    text-align: center;
}

small{
    background: var(--main-color);
    color: #fff;
    width: 100%;
    display: block;
    font-size: 1.3rem;
    padding: 8px;
    margin-top: 18px;
}

/*------------------------------------------------
    ▼▼TOPに戻るボタン   
-------------------------------------------------*/
.back-btn{
    position: fixed;
    right: 20px; bottom: 20px;
    z-index: 5;
}

.back-btn a{
    display: block;
    font-size: 3rem;
    color: gray;
    background: rgba(255,255,255,0.8);
    border-radius: 8px;
    width: 50px;
    height: 50px;
    position: relative;
    box-shadow: 0 0 5px gray;
}

.back-btn a span{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.back-btn a:hover{
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}


/*-----------------------------------------------------------------------
    ハンバーガーメニュー
-----------------------------------------------------------------------*/
#nav-drawer {
    /*アイコンの位置*/
    top:5px;
    right:25px;
}

/*アイコンのスペース*/
#nav-open {
    display: inline-block;
    width: 50px;
    height: 50px;
} 

#nav-open::before{
    font-size: 3rem;
}

/*中身*/
#nav-content {
    top: 0;
    right: 0;
    width: 100%;
    height: 80%;
    -webkit-transform: translateY(-105%);
    transform: translateY(-105%);/*上に隠しておく*/
}

/*チェックボックス中の囲み*/
.nav-content-inner{
    width: 60%;
    margin: -40px auto 0;
}

/*ナビ内リスト項目*/
.sp-menu{
    margin-top: 17px;
    text-align: center;
}

.sp-menu-li a{
    color:var(--sub-color);
    font-weight: bold;
    position: relative;
    display: block;
    transition: .3s;
}

.sp-menu-li{
    font-size:2.5rem;
    font-weight: bold;
    margin-bottom: 30px;
    padding-bottom: 30px;
    color: var(--sub-color);
    border-bottom: dotted 1px var(--sub-color);
}

.sp-menu-li:last-of-type{
    border-bottom: none;
}
}

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


メディアクエリ//スマホ表示用スタイル


=====================================================================================================*/
@media screen and (max-width:571px){
/*------------------------------------
    表示・非表示切り替え
------------------------------------*/
.pc-nav{ display: none; }
.sp-nav{ display: block }
.header-hidden{ z-index: -99; }

/*------------------------------------

    共通部分のスタイル

------------------------------------*/
p{
    font-size: 1.5rem;
    line-height: 1.6;
}

/*---------------------------------------------------------------------

    ▼▼ヘッダー内のスタイル
    
---------------------------------------------------------------------*/
header{
    width: 100%;
    border-bottom: solid 4px var(--main-color);
    position: fixed;
    background: rgba(255,255,255,1);
    z-index: 2;
}

.header-wrap{
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 10px 0 10px 12px;
}

.header-wrap h1{
    width: 112px;
}

/*--------- 問い合わせボタン ---------*/
.contact-link-btn ul{
    display: none;
}

/*---------------------------------------------------------------------

    ▼▼TOP画像部分のスタイル
    
---------------------------------------------------------------------*/
.top-image{
    height: 70vh;
    background-image: url(../img/top-sp2.jpg);
}

.top-image h2{
    width: 100%;
    font-size: 2.1rem;
    top: 55%;
    letter-spacing: 0;
}

.yokoku{
    top:43.5%;
}

.yokoku p{
    font-size: 2rem;
    padding: 8px 20px;
}

.insta-banner{
    width: 110px;
    left: 18px;
    bottom: 15px;
}

/*----------------------------------------------------------------------

    ▼▼メインコンテンツ部分のスタイル
    
---------------------------------------------------------------------*/
/*------------------------------------------------
    ▼▼各項目共通のスタイル   
-------------------------------------------------*/
.sub-section1,
.sub-section2,
.sub-section3,
.sub-section4,
.sub-section5{
    padding: 40px 0;
}

.section-inner{
    width: 90%;
    margin: 0 auto;
}

/*-- 各コンテンツのタイトル --*/
.content-title{
    font-size: 2.7rem;
    letter-spacing: 0.1em;
    margin-bottom: 40px;
}

.content-title::after{
	bottom:-20px;
	width:40px;
	height: 3px;
}

/*------------------------------------------------
    ▼▼1つ目のセクション内のスタイル   
-------------------------------------------------*/
.sub-section1{
    padding-top: 0;
}
/*------- ごあいさつ -------*/
.greeting-box{
    width: 100%;
    padding: 18px 20px;
    box-shadow: none;
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
}

.greeting-box h2{
    font-size: 1.85rem;
    line-height: 1.5;
    padding-bottom: 7px;
    margin-bottom: 7px;
}

/*------- ごあいさつ下画像部分 -------*/
.photo-link{
    width: 100%;
    margin: 0px auto 0;
}

.photo-link li{
    width: 50%;
    margin-top: 0;
}

.photo-link li img{
    height: 160px;
}

.slide-text{
    font-size: 1.6rem;
}

/*------------------------------------
    シェアボタンを表示する際に使用
------------------------------------*/
.tw-share{ 
    width: 220px;
    margin: 15px auto 0;
}

.tw-share p{
    font-size: 1.85rem;
    margin-bottom: 8px;
}

.tw-share p span{
    margin: 0 5px;
}

.tw-share ul li{
    width: 40px;
    height: 40px;
}

.tw-share li a{
    font-size:2.2rem;
}

/*------------------------------------------------
    ▼▼2つ目のセクション内のスタイル    
-------------------------------------------------*/
.sub-section2 ul{
    width: 100%;
    margin: 0 auto;
}

.sub-section2 ul li{
    height: auto;
    flex-direction: column;
    margin-top: 30px;
}

.sub-section2 ul li:nth-child(odd){
    flex-direction: column;
}

.sub-section2 ul li .number{
    font-size: 5.5rem;
    letter-spacing: 0;
}

.sub-section2 ul li:nth-child(odd) .number,
.sub-section2 ul li:nth-child(even) .number{
    top: 210px; left: 10px;
}

.service-photo{
    width: 100%;
}

.service-photo img{
   height: 250px;
}

.service-text{
    width: 100%;
}

.service-text div{
    width: 90%;
    padding: 15px 10px 0;
}

.service-text h3{
    font-size: 2.2rem;
    padding-bottom: 7px;
    margin-bottom: 7px;
}

/*------ サブコンテンツ内の問い合わせリンク ------*/
.sub-link-btn{
    margin: 20px auto 0;
}

.sub-link-btn a{
    font-size: 2rem;
    padding: 8px 15px;
}

.sub-link-btn a .fa-envelope{
    margin-right: 5px;
}

/*------------------------------------------------
    ▼▼3つ目のセクション内のスタイル   
-------------------------------------------------*/
.sub-section3 ul{
    width: 85%;
    flex-direction: column;
}

.sub-section3 ul li,
.sub-section3 ul li:nth-of-type(2){
    width: 100%;
    margin-top: 25px;
}

.sub-section3 ul li:first-of-type{
    margin-top: 0;
}

.sub-section3 ul li div{
    width: 100%;
    padding: 15px 20px;
}

.sub-section3 ul li div{
    width: 100%;
    padding: 20px 30px;
}

.flow{
    width: 85%;
    margin: 30px auto 0;
    padding: 30px 0;
}

.flow-img{
    width: 85%;
}


/*------------------------------------------------
    ▼▼4つ目のセクション内のスタイル    
-------------------------------------------------*/
.sub-section4 table{
    width: 90%;
    margin: 12px auto 15px;
}

.sub-section4 table tr{
    flex-direction: column;
    border-bottom: none;
}

.sub-section4 table th{
    width: 100%;
    font-size: 1.5rem;
    justify-content: left;
    padding: 7px 10px;
    border-left: solid 7px var(--main-color);
}

.sub-section4 table td{
    width: 100%;
    font-size: 1.5rem;
    padding: 8px 0;
    justify-content: left;
}

.sub-section4 table td span{
    margin-right: 5px;
}

.googlemap{
    width: 100%;
    padding-bottom: 70%;
}

.line-banner{
    width: 90%;
    margin: 0 auto 40px;
}

/*------------------------------------------------
    ▼▼5つ目のセクション内のスタイル   
-------------------------------------------------*/
.sub-section5{
    background: var(--bg-color);
}

/* その他の項目は「form-style.css」に記述 */

/*---------------------------------------------------------------------

    フッター内のスタイル
    
---------------------------------------------------------------------*/
footer{
    padding: 15px 0 0;
    color: var(--gray-text);
}

.company-info{
    width: 100%;
    padding: 0 15px;
}

footer h2{
    font-size: 1.5rem;
    margin-bottom: 8px;
}

footer p{
    font-size: 1.35rem;
}

small{
    font-size: 1.25rem;
    padding: 8px;
    margin-top: 10px;
}

/*------------------------------------------------
    ▼▼TOPに戻るボタン   
-------------------------------------------------*/
.back-btn{
    right: 0px; bottom: 0px;
}

.back-btn a{
    font-size: 2.3rem;
    border-radius: 0;
    width: 50px;
    height: 50px;
    box-shadow: none;
}

/*-----------------------------------------------------------------------
    ハンバーガーメニュー
-----------------------------------------------------------------------*/
#nav-drawer {
    /*アイコンの位置*/
    top:7px;
    right:10px;
}
/*アイコンのスペース*/
#nav-open {
    width: 50px;
    height: 50px;
} 

#nav-open::before{
    font-size: 2.5rem;
}

/*中身*/
#nav-content {
    width: 100%;
    height: 80%;
    -webkit-transform: translateY(-105%);
    transform: translateY(-105%);/*上に隠しておく*/
}

#nav-input:checked ~ #nav-content {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);/*中身を表示*/
    box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

/*チェックボックス中の囲み*/
.nav-content-inner{
    width: 80%;
    margin: -30px auto 0;
}

/*ナビ内リスト項目*/
.sp-menu{
    margin-top: 17px;
    text-align: center;
}

.sp-menu-li{
    font-size:2rem;
    font-weight: bold;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.link-menu{
    width: 80%;
    margin: 0 auto;
}

.link-menu-li{
    width: 100%;
    margin: 25px auto;
}

.link-menu-li img{
    width: 100%;
}

.link-menu-li:first-of-type{
    margin: 0 auto;
}
}