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

html, body, h1, dd {
	margin:0;
}

h1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 100;
}

h2 {
    font-size: 1.2rem;
    margin-top: 0;
    padding: 0 10%;
    letter-spacing: 0.1em;
    font-family: 'Yomogi', cursive;
    font-weight: 100;
}

h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    margin: 0;
}

h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    margin: 0;
    padding-top: 16px;
}

html {
	font-size: 62.5%;
    overflow-x: hidden;
}

body {
    color: #333;
	/* font-family: 'Roboto', sans-serif; */
    font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.4rem;
	font-feature-settings: 'palt'; /* プロポーショナルメトリクスを有効にする指定 */
	letter-spacing: 0.05em; /*文字の間隔を指定*/
	-webkit-font-smoothing:antialiased; /*　文字のアンチエイリアス設定(Chrome)　*/
	-moz-osx-font-smoothing:grayscale; /*　文字のアンチエイリアス設定(Firefox)　*/
    text-align: center;
}

a {
	/* color: #595757; */
    color: #333;
	text-decoration: none; /*	デフォルトの下線を非表示にする　*/
}

ul {
	list-style: none; /*  リストの黒丸を消す　*/
    padding: 0;
    text-align: left;
    text-align: justify;
}

li {
    /* padding-top: 5px; */
    line-height: 200%;
    
}

img {
	max-width:100%;
	height: auto;
    pointer-events: none;
    /* max-height: 290px; */
}


/*-----------------------
 * sp_utiyity
 -----------------------*/

 header {
     margin-bottom: 90px;
 }

 section {
     margin-bottom: 120px;
 }

 .sab-title {
     margin-top: 0;
 }

.hr {
    width: 100%;
    height: 4px;
    border: none;
    border-top: 16px dashed #fff;
}

.pc_img {
    display: none;
}

.pctop_img {
    display: none;
}

/*アニメーション要素のスタイル*/
.animation {
	opacity : 0;
	visibility: hidden;
	transition: 1s;
	transform: translateY(100px);
  }

  .animation2 {
	opacity : 0;
	visibility: hidden;
	transition: 2s;
	transform: translateY(100px);
  }

/*アニメーション要素までスクロールした時のスタイル*/
  .active{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
  }

/*-----------------------
 * sp_add
 -----------------------*/

.add-01 a {
    font-size: 1.2rem;
    /* text-decoration: underline;
    text-decoration-color: #d7000f; */
    color: gray;
}


.add-02 {
    border: 1px solid #CCCCCC;
    width: 328px;
    margin: 0 auto;
    margin-bottom: 4%;
}

/*-----------------------
 * sp_header-nav
 -----------------------*/

.nav-wrap {
    height: 60px;
    width: 100%;
    /* padding: 0px 15px; */
    background-color: #002a5b;
    position: fixed;
    top: 0;
    z-index: 10;
    display: flex; /*直下の子要素を横並びにする*/
    justify-content: space-around;
  }

.nav-menu {
    display: flex; /*リストを横並びにする*/
    list-style: none; /*unorder listの 中点を消す*/
    padding: 0; /*中点が位置する左余白を消す*/
    margin: 0; /*上下にある余白を消す*/
  }

.nav-menu a {
    color: #fff;
    text-decoration: none;
    display: block; /*幅と高さを持ったブロック要素*/
    line-height: 60px; /*ヘッダーの高さと同じ60px*/
    padding: 0 20px; /*各リスト項目の余白左右20px*/
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    padding: 0 70px;
  }

.nav-menu a:hover {
    color: #d7000f;
}  


/*-----------------------
 * sp_header
 -----------------------*/

.head {
    background-color: #f7e56f;
    width: 100%;
    height: auto;
}

.sptop-t_img {
    width: 80%;
    margin: 70px 3% 0;

}

/*-----------------------
 * sp_main
 -----------------------*/

 /* h1::before {
     content: "/";

 }

 h1::after {
    content: "/";

} */

/*  */

h1 {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 26px;
	text-align: center;
    letter-spacing: 1px;
}

h1::before,
h1::after {
	content: '';
	width: 1px;
	height: 30px;
	background-color: grey;
}

h1::before {
	margin-right: 20px;
	transform: rotate(-35deg)
}
h1::after {
	margin-left: 20px;
	transform: rotate(35deg)
}

/*  */


 .mc_img {
     width: 20%;
     padding-bottom: 5%;
 }


 .section-wrap {
     margin: 20px 5%;
     border: 1px solid;
     padding: 5%;
     text-align: left;
     box-shadow: 5px 10px 7px 0 rgba(0, 0, 0, .5);
 }

 .section-wrap p {
    /* margin: 0; */
    text-decoration:underline;
    text-decoration-color:#CC0000;
    color: #CC0000;
    letter-spacing: 0.05em;
    line-height: 1.6;
    text-align: justify;
    text-underline-offset: 0.1em;
    margin-top: 8px;
 }

 .section-wrap p:nth-of-type(2) {
    text-decoration-color:#333;
    color: #333;
    font-size: 1.2rem;
    padding: 1% 0;
 }

 .add-text {
    text-decoration-color:#333;
    color: #333;
    font-size: 1.2rem;
    padding: 1% 0;
 }

 .item-wrap {
     display: flex;
     /* padding-bottom: 20px; */
     min-height: 250px;
 }

 .item-wrap img {
     max-height: 290px;

 }

 .item-wrapR {
    flex-direction: row-reverse;

 }

 .item {
     width: 50%;
     padding: 2%;
     text-align: center;
 }

 .item ul {
     padding-left: 8%;
 }

 .item-wrap li {
     line-height: 1.5;
     font-size: 1.2rem;
 }

 .item-wrap li:first-child {
    font-size: 1.6rem;
    margin-bottom: 20px;
 }



.site {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0;
}

.site li {
    width: 48%;
    border: 1px solid;
    margin: 1%;
    /* font-size: 1rem; */
    /* text-align: center; */
    padding: 1%;
    margin-left: 0;
}

.site li a {
    font-size: 1rem;
    display:block;
    /* width: 48%; */
    text-align: center;
    cursor: pointer;
}

.site li:hover {
    background-color: #CCCCCC;
}

/* .site li a:hover {
    display: block;
    color: #fff;
} */

 .item-button {
    background-color: #f7e56f;
    border-radius: 50px;
    /* margin-top: 30px; */
    width: 120px;
    padding: 5px;
    font-size: 1rem;
    /* color: #fff; */
    cursor:pointer;
}

.item-button:hover {
    opacity: 0.5;
}


.slider-wrap h4 {
    text-align: left;
    margin-left: 6%;
}

.slider {
    width: 87%;
    height: 100%;
    /* margin: 10px 5%; */
    margin: 0 auto;
    margin-top: 10px;
  }
  
  .slider img {
    width: 94%;
    padding: 4%;
    object-fit: cover;
    border: 1px solid;
    margin: 2%;
    max-height: 140px;
    object-fit: contain;
  }

  /* .slick-prev:before,
.slick-next:before {
  color: black;
} */
/* .slick-dots li button:before {
  font-size: 18px;
  top: 6px;
} */

/* .slick-prev, .slick-next {
    color: #333;
} */


  .recommend {
      margin: 0 2%;
  }

  .recommend-wrap {
      display: flex;
      flex-wrap: wrap;
  }

  .recommend-item {
      padding: 0 3px 40px;
      width: 50%;
  }

  .caption {
      padding: 12px 3% 0;
      font-size: 1.4rem;
      text-align: left;
      font-weight: bold;

  }

  .caption-c {
      display: block;
      padding-bottom: 6px;
      font-size: 1.2rem;
      text-align: left;
      font-weight: bold;
  }

/*-----------------------
 * sp_ハンバーガーメニュー
 -----------------------*/

 #hamburger .btn-gNav{
	position: fixed;
	top: 0px;
	left: 15px;
	width: 70px;
	height: 50px;
	z-index: 3;
	box-sizing: border-box;
	cursor: pointer;
	-webkit-transition: all 400ms;
	transition: all 400ms;
	/* background: #8fafc3; */
	/* background: #333; */
	opacity: 0.8;
  }

  
  #hamburger .btn-gNav span{
	display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 14px;
    height: 2px;
    border-radius: 1px;
	/* background: #002a5b; */
    background: gray;
  	width: 45%;
  }

  #hamburger .btn-gNav span:nth-child(1) {
	top: 15px;
  }
  #hamburger .btn-gNav span:nth-child(2) {
	top: 23px;
  }
  #hamburger .btn-gNav span:nth-child(3) {
	top: 31px;
  }

  #hamburger .btn-gNav span:nth-child(3)::after {
	content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
    position: absolute;
    top:5px;
    left:0px;
    color: gray;
    font-size: 1.1rem;
    text-transform: uppercase;
  }


  #hamburger .btn-gNav.open span:nth-child(1) {
	background: gray;
	top: 22px;
	-webkit-transform: rotate(-45deg);
	-moz-transform   : rotate(-45deg);
	transform        : rotate(-45deg);
  }
  #hamburger .btn-gNav.open span:nth-child(2),#hamburger .btn-gNav.open span:nth-child(3){
	top: 22px;
	background :gray;
	-webkit-transform: rotate(45deg);
	-moz-transform   : rotate(45deg);
	transform        : rotate(45deg);
  }

  #hamburger .btn-gNav.open span:nth-child(3)::after {
    content:"Close";/*3つ目の要素のafterにClose表示を指定*/
    transform: translateY(0) rotate(-45deg);
    top:-5px;
    left:10px;
    padding-top: 15px;
  }


  #gNav{
	position: fixed;
	overflow-y: scroll;
	top: 0;
	/* right: -100%; */
    left: -100%;
	width: 100%;
	height: 100%; 
	background: rgba(255,255,255,0.95);
	font-size: 16px;
	box-sizing: border-box;
	z-index: 2;
	padding-top: 20px;
	transition: .3s;
  }
  #gNav.open{
	/* right: 0px; */
    left: 0%;
  }
  #gNav .gNav-menu {
	width: 100%;
	height:100%;
	display: flex;
	flex-direction: column;
	text-align: center;
	/*justify-content: center;*/
    padding-top: 30px;
  }

  #gNav .gNav-menu li{
	display: block;
	/* padding : 20px 30px; */
    padding-bottom: 28px;
    padding: 10px 0 28px;
  }

  #gNav .gNav-menu li a{
	text-decoration: none;
    display: block;
    line-height: 28px;
    font-size: 1.4rem;
  }
  
  #gNav .gNav-menu li a:hover {
	opacity: 0.5;
    /* text-decoration: underline; */

  }



 /*-----------------------
 * sp_footer
 -----------------------*/

 .copyright {
    background-color: #eeeeee;
    font-size: 1rem;
    padding: 20px 20px 50px;
}

 .f-menu {
    display: flex;
    justify-content: space-around;
    margin: 0 auto;
    margin-bottom: 100px;
    padding: 10px 5%;
 }


/*-----------------------
* sp_TOPへ戻る
-----------------------*/

#page_top {
   position: fixed;
   bottom: 100px;
   right: 20px;
}
#page_top i {
   /* background-color: #002a5b; */
   background-color: #999;
   color: #fff;
   text-align: center;
   text-decoration: none;
   padding: 20px 20px;
   font-size: 1.4rem;
   opacity: 0.7;
   border-radius: 50%;
}
#page_top i:hover {
   background-color: #f7e56f;
   /* background-color: #666; */
   text-decoration: none;
}



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

@media screen and (min-width:768px) {

    body {
        font-size: 1.6rem;
    }

    h1 {
        font-size: 46px;
    }

    h2 {
        font-size: 1.8rem;
        margin-bottom: 20px;
        padding: 0 20%;
    }

    h4 {
        font-size: 1.6rem;
    }




/*-----------------------
 * tb_ハンバーガーメニュー
 -----------------------*/

    #hamburger .btn-gNav span:nth-child(3)::after {
        font-size: 1.5rem;
        /* content:"Menu";
        position: absolute;
        top:5px;
        left:0px;
        color: gray;
        text-transform: uppercase; */
      }


      #hamburger .btn-gNav.open span:nth-child(3)::after {
        /* content:"Close"; */
        /* transform: translateY(0) rotate(-45deg); */
        top:-13px;
        left:10px;
        padding-top: 26px;
      }


      #hamburger .btn-gNav {
        left: 25px;
        width: 100px;
    }

    #hamburger .btn-gNav span:nth-child(2) {
        top: 25px;
    }

    #hamburger .btn-gNav span:nth-child(3) {
        top: 35px;
    }


/*-----------------------
 * tb_head
 -----------------------*/

    .sptop-t_img {
        width: 70%;
    }

    header {
        margin-bottom: 140px;
    }

/*-----------------------
 * tb_main
 -----------------------*/

 .item-wrap {
    min-height: 350px;
}

 .item-wrap li:first-child {
    font-size: 3rem;
 }

 .item-wrap li {
    font-size: 1.8rem;
 }

 .item-button {
    width: 200px;
    padding: 10px;
    font-size: 1.6rem;
    margin-top: 10px;
 }

 .slider img {
    max-height: 290px;
  }

 .recommend {
     margin: 0 10%;
 }

 .recommend-item {
     width: 33%;
 }


  /*-----------------------
 * tb_footer
 -----------------------*/
 .f-menu {
    padding: 10px 20%;
}


}



@media screen and (min-width:1100px) {

    section {
        width: 980px;
        margin: 0 auto;
        margin-bottom: 240px;
    }

    .sptop_img {
        display: none;
    }

    .sp_img {
        display: none;
    }

    .pc_img {
        display: block;
    }

    .pctop_img {
        display: block;
        width: 100%;
    }

    h2 {
        position: absolute;
        top: 10px;
        left:126px;
        padding: 0 20% 0 10%;
    }


/*-----------------------
 * pc_head
 -----------------------*/

 #hamburger .btn-gNav {
    left: 70px;
}

.sptop-t_img {
    width: 50%;
}

/*-----------------------
 * pc_main
 -----------------------*/

    .mc-wrap {
        /* display: flex;
        justify-content: center; */
        position: relative;
    }


    .mc_img {
        width: 9%;
        position: absolute;
        top: 0;
        left: 100px;
    }

    .section-w {
        display: flex;
        margin-top: 100px;
    }

    .section-wrap {
        margin: 20px 1%;
        padding: 2%;
        width: 50%;
    }
   

    .item-wrap li:first-child {
        font-size: 2.6rem;
        height: 6vw;
     }

    .item-wrapR {
        flex-direction: row
    }

    .item-button {
        width: 160px;
        font-size: 1.2rem;
        margin-left: -10px;
    }

    .slider {
        width: 97%;
    }


    .slider-wrap h4 {
        margin-left: 2%;
    }


    .recommend {
        margin: 0 2%;
    }

    .recommend-item {
        width: 25%;
    }



 /*-----------------------
 * pc_footer
 -----------------------*/
    .f-menu {
        padding: 10px 30%;
    }
}