@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;
   margin-bottom: 20px;
}

.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: 30%;
   transform: translate(0,-50%);
}

.office_name{
   font-size: 2.5rem;
   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;
}
.secondary-text{
   font-size: 1.5rem;
   margin-top: 50px;
}

.tertiary-title{
   font-size: 2.5rem;
   text-align: center;
}
/* =============== 汎用タイトルとテキストここまで =============== */

/*  施設外 -------------- */
.outside-wrap{
   margin-bottom: 120px;
}

.outside-detail-container{
   margin: 100px 0 50px;
   position: relative;
}
.outside-detail-title{
   font-size: 2rem;
   color: deepskyblue;
   text-decoration: underline;
   text-decoration-color: red;
   position: absolute;
   top: -30%;
}
.outside-detail-text{
   background-color: white;
   border-radius: 20px;
   padding: 30px  40px;
   font-size: 1.5rem;
}
/*  施設外ここまで -------------- */

/* 施設外画像 */
.outside-visual-img{
   width: 100%;
   height: 550px;
   object-fit: cover;
}

/*  スライダー01 -------------- */
.slider01{
   margin-top: 10px;
}
.slider01-item{
   width: 300px;
   object-fit: cover;
}
/*  スライダー01ここまで -------------- */

/*  施設内 -------------- */
.inside-wrap{
   margin-bottom: 120px;
}

.inside-detail-container{
   margin: 100px 0 50px;
   position: relative;
}
.inside-detail-title{
   font-size: 2rem;
   color: deepskyblue;
   text-decoration: underline;
   text-decoration-color: red;
   position: absolute;
   top: -30%;
}
.inside-detail-block{
   background-color: white;
   border-radius: 20px;
   padding: 30px  40px;
}
.inside-detail-text{
   padding-left:1em;
	text-indent:-1em;
   font-size: 1.5rem;
}
.inside-text-red{
   color: red;
}
/*  施設内ここまで -------------- */

/*  スライダー02 -------------- */
.slider02{
   margin-top: 10px;
}
.slider02-item{
   width: 300px;
   object-fit: cover;
}
/*  スライダー02ここまで -------------- */

/* 施設内画像 */
.inside-visual-img{
   width: 100%;
   height: 550px;
   object-fit: cover;
}

/*  1日の流れ -------------- */
.flow-body{
   width: 100%;
   text-align: center;
   margin: 0 auto 100px;
   background-color: var(--secondary-color);
   padding: 100px 0;
}

.flow-wrap{
   margin: 0 auto;
}

.flow-container{
   display: flex;
   justify-content: space-around;
   margin: 50px auto 80px;
}

.flow-chart-img{
   width: 250px;

}
.flow-img-block{
   width: 50%;
}
.flow-img{
   display: block;
   width: 200px;
   margin: 30px 70px;
}

/* 出勤時間 */
.time-container{
   background-color: white;
   border-radius: 20px;
   font-size: 1.5rem;
   padding: 20px 20px 20px 120px;
   position: relative;
}
.time-text{
   padding-left:1em;
	text-indent:-1em;
   font-size: 1rem;
}
.time-heading{
   width: 110px;
   height: 100%;
   position: absolute;
   top: 0%;
   left: 0;
   border-radius: 20px;
   background-color: var(--tertiary-color);
}
.time-heading::before{
   content: "出勤時間";
   color: white;
   font-size: 1.2rem;
   position: absolute;
   top: 50%;
   left: 14%;
   transform: translate(0%,-50%);
}
/* 出勤時間ここまで */

/* 利用日 */
.use-container{
   margin-top: 80px;
}
.use-dl{
   margin-top: 50px;
   margin-bottom: 20px;
   display: flex;
   justify-content: center;
}
.use-block{
   border-top: 2px solid black;
}
.use-block:first-of-type{
   border-left: 2px solid black;
}
.use-dd{
   background-color: #f2f2f2;
   font-size: 3rem;
   border-right: 2px solid black;
   border-bottom: 2px solid black;
   width: 1.5em;
   text-align: center;
}
.use-dt{
   background-color: white;
   font-size: 3rem;
   border-right: 2px solid black;
   border-bottom: 2px solid black;
   width: 1.5em;
   text-align: center;
}

.use-text{
   font-size: 1.1rem;
   padding-left: 100px;
}
/* 利用日ここまで */

/*  1日の流れここまで -------------- */

/*  イベント -------------- */

.empty-1{
   padding: 30px;
}

.ivent-mainvisual-img{
   width: 100%;
   height: 400px;
   object-fit: cover;
}
.ivent-img-container{
   display: flex;
   justify-content: space-around;
   margin-top: 5px;
}
.ivent-subvisual-img{
   width: 24%;
   object-fit: cover;
}

/*  イベントここまで -------------- */

/*  施設情報 -------------- */
.info-body{
   background-color: var(--secondary-color);
   padding: 80px 0;
}

.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;
}

.map-container{
   text-align: center;
   margin-top: 50px;
}
.map{
   width: 600px;
   height: 400px;
}
/*  施設情報ここまで -------------- */

/* -------------------------------
   タブレット
   -------------------------------
*/
@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: 70%;    
      height: 100px;  
   }

   .top-logo{
      width: 100px;
      height: 100px;
      left: 10%;
   }

   .office_name{
      font-size: 2rem;
   }
   /*  タブレット会社名ここまで -------------- */

   /*  タブレット特徴 -------------- */
   .features-wrap{
      margin: 50px auto 80px;
      width: 70%;
   }

   .features-title{
      font-size: 2rem;
      margin-bottom: 30px;
   }

   .features-text{
      font-size: 1.4rem;
   }
   /*  タブレット特徴ここまで -------------- */

   /* =============== タブレット汎用タイトルとテキスト =============== */
   .secondary-title{
      padding: 15px 80px;
      font-size: 2.5rem;
   }
   .secondary-text{
      font-size: 1.4rem;
      margin-top: 30px;
   }
   .tertiary-title{
      font-size: 2rem;
   }
   /* =============== タブレット汎用タイトルとテキストここまで =============== */

   /*  タブレットホ施設外 -------------- */
   .outside-wrap{
      margin-bottom: 80px;
   }
   .outside-detail-container{
      margin: 80px 0 50px;
   }
   .outside-detail-title{
      font-size: 2.2rem;
      top: -35%;
   }

   .outside-detail-text{
      font-size: 1.4rem;
   }
   /*  タブレット施設外ここまで -------------- */
   
   /* タブレット施設外画像 */
   .outside-visual-img{
      height: 400px;
   }

   /*  タブレットスライダー01 -------------- */
   .slider01-item{
      width: 200px;
   }
   /*  タブレットスライダー01ここまで -------------- */

   /*  タブレット施設内 -------------- */
   .inside-wrap{
      margin-bottom: 60px;
   }
   .inside-detail-container{
      margin: 80px 0 40px;
   }

   .inside-detail-title{
      font-size: 2.2rem;
      top: -35%;
   }
   .inside-detail-text{
      font-size: 1.4rem;
   }
   /*  タブレット施設内ここまで -------------- */

   /* タブレット施設内画像 */
   .inside-visual-img{
      height: 400px;
   }
   
   /*  タブレットスライダー02 -------------- */

   .slider02-item{
      width: 200px;
   }
   
   /*  タブレットスライダー02ここまで -------------- */

   /*  タブレット1日の流れ -------------- */
   .flow-body{
      padding: 50px 0;
      margin: 0 auto 50px;
   }

   .flow-container{
      display: flex;
      justify-content: center;
      flex-direction: column;
      margin: 40px 0 50px;
   }
   .flow-img-block{
      display: none;
   }
   .flow-chart-img{
      display: block;
      width: 50%;
      margin: 0 auto;
   }
   /*  タブレット1日の流れここまで -------------- */

   /*  タブレット出勤時間 -------------- */
   .time-container{
      font-size: 1.4rem;
      padding: 10px 10px 10px 120px;
   }
   .time-text{
      font-size: 1.3rem;
   }
   .time-heading{
      width: 110px;
   }
   .time-heading::before{
      left: 7%;
      font-size: 1.4rem;
   }
   /*  タブレット出勤時間ここまで -------------- */

   /*  タブレット利用日 -------------- */
   .use-container{
      margin-top: 60px;
   }
   .use-dl{
      margin-top: 40px;
   }

   .use-dd{
      font-size: 3rem;
   }

   .use-dt{
      font-size: 3rem;
   }

   .use-text{
      padding-left: 30px;
      font-size: 1.4rem;
   }
   /*  タブレット利用日ここまで -------------- */

   /*  タブレットイベント -------------- */
   .empty-1{
      padding: 10px;
   }
   .ivent-mainvisual-img{
      height: 250px;
   }
   /*  タブレットイベントここまで -------------- */
   
   /*  タブレット施設情報 -------------- */
   .info-address{
      font-size: 1.4rem;
   }
   .info-tel{
      font-size: 2.2rem;
   }
   .map{
      width: 100%;
      height: 350px;
   }
   /*  タブレット施設情報ここまで -------------- */
}

/* -------------------------------
   スマホ
   -------------------------------
*/
@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: 250px;
   }
   .top-visual-img{
      top: 0;
   }
   /*  スマホトップビジュアルここまで -------------- */

   /*  スマホ会社名 -------------- */
   .office_name-wrap{
      width: 90%;    
      height: 100px;  
   }

   .top-logo{
      width: 100px;
      height: 100px;
      left: 5%;
   }

   .office_name{
      font-size: 1.5rem;
   }
   /*  スマホ会社名ここまで -------------- */

   /*  スマホ特徴 -------------- */
   .features-wrap{
      margin: 50px 0 80px;
   }

   .features-title{
      font-size: 2rem;
      margin-bottom: 30px;
   }

   .features-text{
      font-size: 1.1rem;
   }
   /*  スマホ特徴ここまで -------------- */

   /* =============== スマホ汎用タイトルとテキスト =============== */
   .secondary-title{
      padding: 15px 80px;
      font-size: 2rem;
   }
   .secondary-text{
      font-size: 1.1rem;
      margin-top: 30px;
   }
   .tertiary-title{
      font-size: 2rem;
   }
   /* =============== スマホ汎用タイトルとテキストここまで =============== */

   /*  スマホ施設外 -------------- */
   .outside-wrap{
      margin-bottom: 80px;
   }
   .outside-detail-container{
      margin: 80px 0 50px;
   }
   .outside-detail-title{
      top: -30%;
   }

   .outside-detail-text{
      font-size: 1.1rem;
   }
   /*  スマホ施設外ここまで -------------- */
   
   /* スマホ施設外画像 */
   .outside-visual-img{
      height: 250px;
   }

   /*  スマホスライダー01 -------------- */
   .slider01-item{
      width: 200px;
   }
   /*  スマホスライダー01ここまで -------------- */

   /*  スマホ施設内 -------------- */
   .inside-wrap{
      margin-bottom: 60px;
   }
   .inside-detail-container{
      margin: 80px 0 40px;
   }

   .inside-detail-title{
      top: -30%;
   }
   .inside-detail-text{
      font-size: 1.1rem;
   }
   /*  スマホ施設内ここまで -------------- */

   /* スマホ施設内画像 */
   .inside-visual-img{
      height: 250px;
   }
   
   /*  スマホスライダー02 -------------- */

   .slider02-item{
      width: 200px;
   }
   
   /*  スマホスライダー02ここまで -------------- */

   /*  スマホ1日の流れ -------------- */
   .flow-body{
      padding: 50px 0;
      margin: 0 auto 50px;
   }

   .flow-container{
      display: flex;
      justify-content: center;
      flex-direction: column;
      margin: 40px 0 50px;
   }
   .flow-img-block{
      display: none;
   }
   .flow-chart-img{
      display: block;
      width: 70%;
      margin: 0 auto;
   }
   /*  スマホ1日の流れここまで -------------- */

   /*  スマホ出勤時間 -------------- */
   .time-container{
      font-size: 1.2rem;
      padding: 10px 10px 10px 100px;
   }

   .time-heading{
      width: 90px;
   }
   .time-heading::before{
      left: 7%;
   }
   /*  スマホ出勤時間ここまで -------------- */

   /*  スマホ利用日 -------------- */
   .use-container{
      margin-top: 60px;
   }
   .use-dl{
      margin-top: 40px;
   }

   .use-dd{
      font-size: 2rem;
   }

   .use-dt{
      font-size: 2rem;
   }

   .use-text{
      padding-left: 30px;
   }
   /*  スマホ利用日ここまで -------------- */

   /*  スマホイベント -------------- */
   .empty-1{
      padding: 10px;
   }
   .ivent-mainvisual-img{
      height: 250px;
   }
   /*  スマホイベントここまで -------------- */
   
   /*  スマホ施設情報 -------------- */
   .map{
      width: 100%;
      height: 300px;
   }
   /*  スマホ施設情報ここまで -------------- */
}