@charset "UTF-8";

body{
   font-size: 62.5%;
   font-family: 'Noto Sans JP', sans-serif;
   background-color: var(--primary-color);
}

a{
   display: inline-block;
   text-decoration: none;
   color: black;
}

*{
   box-sizing: border-box;
}

.inner{
   width: 1200px;
   margin: 0 auto;
   text-align: center;
}
.secondary-inner{
   width: 700px;
   margin: 0 auto;
   text-align: center;
}

:root {
   --primary-color: #f6efe1;
   --secondary-color:#EAF7FD;
   --tertiary-color:#99B4E4;
 }

 /* 電話リンク750px以下の時、有効 */
 @media (min-width: 751px) {
   a[href*="tel:"] {
   pointer-events: none;
   cursor: default;
   text-decoration: none;
   }
}

/* -------------------------------
   コンテンツ
   -------------------------------
*/
/*  トップビジュアル -------------- */
.top-visual-wrap{
   position: relative;
   overflow: hidden;
   width: 100%;
   height: 45vw;
}

.top-visual-img{
   position: absolute;
   top: -25%;
   left: 50%;
   transform: translate(-50%, 0%);
   height: auto;
   width: 100%;
}
/*  トップビジュアルここまで -------------- */

/*  会社名前 -------------- */
.office_name-wrap{
   background-color: var(--tertiary-color);
   position: relative;
   border-radius: 0 20px 20px 0;
   height: 150px;
   width: 70%;
   margin: 10px 0 50px;
}

.top-logo{
   width: 180px;
   height: 180px;
   position: absolute;
   top: 50%;
   left: 20%;
   transform: translate(0,-50%);
}

.office_name{
   font-size: 2.2rem;
   color: white;
   text-align: center;
   position: absolute;
   top: 50%;
   right: 10%;
   transform: translate(0,-50%);
}

/*  会社名前ここまで -------------- */

/*  ホームの特徴 -------------- */
.features-wrap{
   margin: 70px auto 130px;
}

.features-title{
   font-size: 2.5rem;
   color: deepskyblue;
   margin-bottom: 40px;
}

.features-text{
   font-size: 1.5rem;
}

/*  ホームの特徴ここまで -------------- */

/* =============== 汎用タイトルとテキスト =============== */

.secondary-title{
   text-align: center;
   background-color: var(--tertiary-color);
   padding: 20px 100px;
   border-radius: 10px;
   font-size: 2.5rem;
   color: white;
   display: inline-block;
}

.spacer01{
   padding: 30px;
}

/* =============== 汎用タイトルとテキストここまで =============== */

/* ホームラッパー */
.home-wrap{
   margin-bottom: 100px;
}

/* ホーム画像 */
.home-mainvisual{
   height: 400px;
   width: 100%;
   object-fit: cover;
}
.home-img-container{
   margin-top: 5px;
   margin-bottom: 100px;
   display: flex;
   justify-content: space-around;
}
.home-subvisual{
   width: 19%;
   object-fit: cover;
}
/* ホーム画像ここまで */

/*  費用 -------------- */

.cost-dl{
   position: relative;
   background-color: white;
   padding: 60px 10px 20px;
   width: 80%;
   margin: 0 auto;
   border-radius: 30px;
}
.cost-title{
   background-color: var(--tertiary-color);
   color: white;
   font-size: 2rem;
   padding: 20px 60px;
   border-radius: 50px;
   position: absolute;
   top: 0;
   left: 50%;
   transform: translate(-50%,-50%);
}
.cost-container{
   display: flex;
   border-bottom: 1px solid black;
   margin: 10px 0;
}
.cost-heading{
   font-size: 1.5rem;
   background-color: var(--tertiary-color);
   color: white;
   width: 6em;
   display: flex;
   justify-content: center;
   align-items: center;
}
.cost-detail{
   font-size: 1.1rem;
   padding: 10px 20px;
}
.cost-coment{
   font-size: 1rem;
   text-align: right;
}
/*  費用ここまで -------------- */

/*  地図 -------------- */
.map-container{
   margin: 50px 0;
}

.map{
   width: 100%;
   height: 400px;
}
/*  地図ここまで -------------- */

/* すずなタイトルテキスト */
.secondary-text{
   font-size: 1.2rem;
   text-align: center;
}

/*  お問い合わせ -------------- */

.info-body{
   background-color: var(--secondary-color);
   padding: 80px 0 20px;
}

.info-container{
   display: flex;
   justify-content: center;
   margin-top: 50px;
}

.info-img-block{
   width: 30%;
}
.info-img{
   width: 200px;
   display: block;
   margin: 0 auto;
}
.info-name{
   font-size: 1.5rem;
}
.info-address{
   font-size: 1rem;
}
.info-tel{
   font-size: 1.8rem;
}
.info-box{
   margin-top: 30px;
}
.info-text{
   font-size: 1.2rem;
   padding-left:1em;
	text-indent:-1em;
}

/*  お問い合わせここまで -------------- */

/* -------------------------------
   タブレット
   -------------------------------
*/
@media screen and (min-width:751px) and (max-width:1280px) {
   .inner{
      width: 100%;
      margin: 0 auto;
      text-align: center;
   }
   .secondary-inner{
      width: 95%;
      margin: 0 auto;
      text-align: center;
   }

   /*  タブレットトップビジュアル -------------- */
   .top-visual-wrap{
      height: auto;
      aspect-ratio: 11/6;
   }
   
   .top-visual-img{
      top: 0;
   }
   /*  タブレットトップビジュアルここまで -------------- */

   /*  タブレット会社名前 -------------- */
   .office_name-wrap{
      width: 75%;
      height: 90px;
   }
   .top-logo{
      width: 100px;
      height: 100px;
      left: 10%;
   }
   .office_name{
      font-size: 1.8rem;
      right: 3%;
   }
   /*  タブレット会社名前ここまで -------------- */

   /*  タブレットホームの特徴 -------------- */
   .features-wrap{
      margin: 50px auto 70px;
      width: 70%;
   }
   .features-title{
      font-size: 2rem;
      margin-bottom: 20px;
   }
   .features-text{
      font-size: 1.4rem;
   }

   /*  タブレットホームの特徴ここまで -------------- */

   /* =============== タブレット汎用タイトル =============== */
   .secondary-title{
      padding: 20px 80px;
      font-size: 2.5rem;
   }
   /* =============== タブレット汎用タイトルここまで =============== */

   /* spacer */
   .spacer01{
      padding: 15px;
   }

   /* タブレットホームラッパー */
   .home-wrap{
      margin-bottom: 90px;
   }

   /*  タブレットホーム画像 -------------- */
   .home-mainvisual{
      height: 380px;
   }
   .home-img-container{
      margin-bottom: 80px;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
   }
   .home-subvisual{
      width: 30%;
   }
   /*  タブレットホーム画像ここまで -------------- */

   /*  タブレット費用 -------------- */
   .cost-dl{
      width: 90%;
   }

   .cost-title{
      font-size: 2rem;
      padding: 20px 40px;
   }

   .cost-heading{
      font-size: 1.8rem;
   }
   .cost-detail{
      width: 12em;
      padding: 10px 5px;
      font-size: 1.4rem;
   }
   /*  タブレット費用ここまで -------------- */

   /*  タブレット地図 -------------- */
   .map-container{
      margin: 30px 0;
   }
   .map{
      height: 400px;
   }
   /*  タブレット地図ここまで -------------- */
   
   /* タブレットすずなタイトルテキスト */
   .secondary-text{
      font-size: 1.4rem;
   }

   /*  タブレットお問い合わせ -------------- */
   .info-body{
      padding: 50px 0 20px;
   }
   .info-address{
      font-size: 1.4rem;
   }
   .info-tel{
      font-size: 2.5rem;
   }
   /*  タブレットお問い合わせここまで -------------- */
}

/* -------------------------------
   スマホ
   -------------------------------
*/
@media screen and (max-width:750px){
   .inner{
      width: 100%;
      margin: 0 auto;
      text-align: center;
   }
   .secondary-inner{
      width: 95%;
      margin: 0 auto;
      text-align: center;
   }

   /*  スマホトップビジュアル -------------- */
   .top-visual-wrap{
      height: 230px;
   }
   
   .top-visual-img{
      top: 0;
   }
   /*  スマホトップビジュアルここまで -------------- */

   /*  スマホ会社名前 -------------- */
   .office_name-wrap{
      width: 95%;
      height: 90px;
   }
   .top-logo{
      width: 70px;
      height: 70px;
      left: 3%;
   }
   .office_name{
      font-size: 1.5rem;
      right: 3%;
   }
   /*  スマホ会社名前ここまで -------------- */

   /*  スマホホームの特徴 -------------- */
   .features-wrap{
      margin: 50px auto 70px;
   }
   .features-title{
      font-size: 2rem;
      margin-bottom: 20px;
   }
   .features-text{
      font-size: 1.2rem;
   }

   /*  スマホホームの特徴ここまで -------------- */

   /* =============== スマホ汎用タイトル =============== */
   .secondary-title{
      padding: 20px 50px;
      font-size: 2rem;
   }
   /* =============== スマホ汎用タイトルここまで =============== */

   /* spacer */
   .spacer01{
      padding: 15px;
   }

   /* スマホホームラッパー */
   .home-wrap{
      margin-bottom: 90px;
   }

   /*  スマホホーム画像 -------------- */
   .home-mainvisual{
      height: 250px;
   }
   .home-img-container{
      margin-bottom: 80px;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
   }
   .home-subvisual{
      width: 30%;
   }
   /*  スマホホーム画像ここまで -------------- */

   /*  スマホ費用 -------------- */
   .cost-dl{
      width: 90%;
   }

   .cost-title{
      font-size: 1.5rem;
      padding: 20px 30px;
   }

   .cost-heading{
      font-size: 1.2rem;
   }
   .cost-detail{
      width: 12em;
      padding: 10px 5px;
   }
   /*  スマホ費用ここまで -------------- */

   /*  スマホ地図 -------------- */
   .map-container{
      margin: 30px 0;
   }
   .map{
      height: 250px;
   }
   /*  スマホ地図ここまで -------------- */
   
   /* スマホすずなタイトルテキスト */
   .secondary-text{
      font-size: 1.1rem;
   }

   /*  スマホお問い合わせ -------------- */
   .info-body{
      padding: 50px 0 20px;
   }
   /*  スマホお問い合わせここまで -------------- */
}