@charset "utf-8";

/* ******************************
* 基本設定
****************************** */
html{scroll-behavior: smooth;}
body {
  color:#444444;
  font-size: 1.25rem;
  font-family: "Sawarabi Gothic";
  width: 100vw;
  background-color:#f4a594;
  overflow-x: hidden;
}
section{margin-bottom: 5rem;}
h1{margin-bottom: 1rem;}
ul{list-style: none;}
ul li{margin-bottom:0.5rem;}
img{max-width: 100%;}

a{color:#444444;text-decoration: none;}
a:visited {color:;}
a:active {color:;}
a:hover{opacity: 0.5;}
h1,h2,h3,h4{font-family: 'Yomogi', cursive;}


/* ******************************
* レイアウト
****************************** */
.grid_lo{display: grid;}
.col2{grid-template-columns: 1fr 1fr;grid-gap: 2rem;}
.col3{grid-template-columns: 1fr 1fr 1fr;grid-gap: 1.5rem;}
.to_columns{}
.dl_grid{
  grid-template-columns: auto 1fr;
  grid-column-gap: 1rem;
}
.dl_grid dt{
  background-color: #fff;color:#f4a594;
  padding: .25rem .5rem .25rem .5rem;
  text-align: center;
}
.dl_grid dd{
  color:#fff;
  padding: .25rem .5rem .25rem .5rem;
  border-bottom:dashed .5px #fff;
}

/* ******************************
* header
****************************** */
header{
  width: 100vw;
  position: fixed;top:0;z-index: 10;
  padding: 1vh 1vw 0 1vw;
  display: grid;grid-auto-flow: column;
  justify-content: space-between;
}
.sss_logo img{display: block;}
.g_nav{}
.tab_input,.triger_box,.sp_menu_bg{display:none;}
.triger_box{
  display: grid;
  grid-template-rows:1fr 1fr 1fr;grid-template-columns: 1fr;
  width: 2rem;height:2rem;
  grid-row-gap:0.1rem;
  align-items:center;
  background-color: #fff;
  padding: 0.5rem;
  border-radius: 50%;
}
.triger_box span{
  display: block;
  background-color: #444;
  height: 0.1rem;
}
.menu_mount{
  display: none;
  opacity: 0;
  position: fixed;
  top:0;left:0;
  width: 100%;height:100vh;
  background-color: #f4a594;
  place-items:center;
}

.menu_list{grid-row-gap:0.5rem;text-align: center;}
.menu_list li{border-bottom: 1px solid #444444;text-align: center;}
.menu_list li:hover{opacity: .66;}
#nav_input:checked ~ .menu_mount {
  opacity: 1;z-index: -1;
  display: grid;
  animation:tabAnim ease-in 0.5s ; -ms-animation:tabAnim ease-in 0.5s ;
}

#nav_input:checked ~ .triger_box .btn_bar_top{
  transform: rotate(-45deg);grid-area: 2/1;
  animation:tabAnimX1 ease-in 0.5s ; -ms-animation:tabAnimX1 ease-in 0.5s ;
}
#nav_input:checked ~ .triger_box .btn_bar_mid{opacity: 0;}
#nav_input:checked ~ .triger_box .btn_bar_undr{
  transform: rotate(45deg);grid-area: 2/1;
  animation:tabAnimX2 ease-in 0.5s ; -ms-animation:tabAnimX2 ease-in 0.5s ;
}
@keyframes tabAnim{
  0%{opacity:0;}
  100%{opacity:1;}
}
@keyframes fadeOut {
  100% {opacity: 1;}
  0% {opacity: 0;}
}
@keyframes tabAnimX1{
  0%{transform: rotate(0deg);opacity:0;}
  100%{transform: rotate(-45deg);opacity:1;}
}
@keyframes tabAnimX2{
  0%{transform: rotate(0deg);opacity:0;}
  100%{transform: rotate(45deg);opacity:1;}
}
.sp_menu_links{
  display:grid;grid-row-gap:1rem;
  place-items:center;
  margin-top: 1.5rem;
}


/* ******************************
* main
****************************** */
/* common */
main{min-height:100vh;padding-top: 75px;}
.sec_box{padding-left: 10vw;padding-right: 10vw;}
.sec_title{
  font-size:4rem;color:#fff;text-align: center;
  margin-top: 3rem;margin-bottom:3rem;
  display: grid;
  grid-template-columns:auto auto auto;
  grid-column-gap: 1rem;
  place-items: center;justify-content: center;
}

.l2_title{
  margin-bottom: .5rem;
  border-bottom: solid 0.5px #444444;
}
.l3_title{margin-bottom: .25rem;}

.sec_p{color:#f4a594;}
.sec_p::after{
  display: block;width: 30px;height:30px;
  content:'';
  background: url(../img/symbol_flowe_p.png) 75% 75% / cover;
  /*animation: 10s linear infinite rotation;*/
}
.sec_p::before{
  display: block;width: 30px;height:30px;
  content:'';
  background: url(../img/symbol_flowe_p.png) 75% 75% / cover;
  /*animation: 10s linear infinite rotation;*/
}
.sec_w::after{
  display: block;width: 30px;height:30px;
  content:'';
  background: url(../img/symbol_flowe_w.png) 75% 75% / cover;
  /*animation: 10s linear infinite rotation;*/
}
.sec_w::before{
  display: block;width: 30px;height:30px;
  content:'';
  background: url(../img/symbol_flowe_w.png) 75% 75% / cover;
  /*animation: 10s linear infinite rotation;*/
}

@keyframes rotation{
0%{ transform:rotate(0);}
100%{ transform:rotate(360deg); }
}

.to_top{width: fit-content;margin: 1.5rem auto 1.5rem auto;}
.to_top a{color:#444444;}

/* hcero-iamge */
.h_img_box{
  display: grid;grid-gap:1rem;
  background-color: #fff;
}
.h_img_box::before{
  content: "";
  background-image: url(../img/h_img_bordertop.jpg);
  background-repeat: repeat-x;
  display: block;
  height:25px;width: 100%;
}
.h_img_box::after{
  content: "";
  background-image: url(../img/h_img_borderbottom.jpg);
  background-repeat: repeat-x;
  display: block;
  height:25px;width: 100%;
}
.h_img{display: grid;place-items: center;}
.h_img_sp{display: none;}

/* コンセプト */
#sec_lead{color:#fff;font-size: 1.25rem;}
#sec_lead p{font-size: 1.5rem;line-height: 6rem;}
.pic_grid{
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap:2.5rem;
}
.rotate5{transform: rotate(5deg);}
.rotate-5{transform: rotate(-5deg);}

.pic_grid img{width: 100%;}
.pic_grid_1{grid-row: 1;grid-column:1;}
.pic_grid_2{grid-row: 1;grid-column:2;}
.pic_grid_3{grid-row: 2;grid-column:1/3;}
.pic_grid_4{grid-row: 1;grid-column:1/3;}
.pic_grid_5{grid-row: 2;grid-column:1;}
.pic_grid_6{grid-row: 2;grid-column:2;}


/* 書籍情報 */
.sss_sp_horscroll{
  display: grid;grid-auto-flow: column;
  grid-column-gap:1rem;
  width: 100%;
  overflow-x: scroll;
}


/* 法人特典ブロマイド */
.hol_scroll_mount::-webkit-scrollbar{
  display: none;
}
.hol_scroll{
  margin: auto 10vw 0 10vw;padding: 1rem;
  display: grid;
  grid-column-gap:1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.hol_scroll_box{
  display: grid;background-color: #fff;
}
.hol_scroll_box::before{
  content: "";
  background-image: url(../img/h_img_bordertop.jpg);
  background-repeat: repeat-x;
  display: block;
  height:25px;width: 100%;
}
.hol_scroll_box::after{
  content: "";
  background-image: url(../img/h_img_borderbottom.jpg);
  background-repeat: repeat-x;
  display: block;
  height:25px;width: 100%;
}
.hol_scroll::-webkit-scrollbar{display: none;}
.hol_scroll li{text-align: center;}
.hol_scroll figure{width: fit-content;}
.scr_explain,.to_scroll{
  text-align: center;
  font-size: 0.8rem;
  color:#f4a594;
}
.to_scroll{margin-bottom: 2.5rem;display: none;}


/* お知らせ */
.news_box{margin: auto;width: fit-content;}
.news_box li{
  display: grid;grid-template-columns: auto 1fr;
  grid-column-gap: 1.5rem;
  margin-bottom: 1rem;
}
.news_title{text-align: left;}

/* お知らせ記事 */
.art_title{
  font-size:2.5rem;color:#fff;text-align: center;
  margin-top: 3rem;margin-bottom:0;
  display: grid;
  grid-template-columns:auto auto auto;
  grid-column-gap: 1rem;
  place-items: center;justify-content: center;
}
.time-stamp{text-align: center;color:#fff;margin-bottom: 2.5rem;}
.art_box{
  color:#fff;
  margin-bottom:2.5rem;padding:1rem 0 1rem 0;
  border-bottom:dashed 1px #fff;border-top:dashed 1px #fff;
}
.art_box div{margin-bottom:2.5rem;}
.art_box p {margin-bottom:1rem;}
/* ******************************
* footer
****************************** */
footer{
  display: grid;place-items:center;
  font-size: 1rem;
  background-color: #fff;
}
footer::before{
  content: "";
  background-image: url(../img/h_img_bordertop.jpg);
  background-repeat: repeat-x;
  display: block;
  height:25px;width: 100%;
}
.copyright{margin-top: 4.5vh;margin-bottom: 4.5vh;}