/* =========================================================================================
Home
=========================================================================================*/
/* TITLE */
#toppage h2 b,
#toppage h2 small { display: block; letter-spacing: 4px;}
#toppage h2 b { font-size: 30px; color: #0F8240; font-weight:400;}
#toppage h2 small { font-size:20px; font-weight:500;}
#toppage .b_more a { 
    position: relative;
    padding-left: 70px;
    color: #026937;
    font-size: 125%;
    letter-spacing: 2px;
}

/* BTM MORE1 */
#toppage .b_more a::before,
#toppage .b_more a::after {
    display: block; clear: both; content:"";
    position: absolute; top: 0; bottom: 0;
    margin: auto;
    background: #026937;
    transition: 0.3s;
}
#toppage .b_more a::before {
    left: 50px;
    width: 10px; height: 10px;
    border-radius: 10px;
}
#toppage .b_more a::after {
    left: 0;
    width: 55px; height: 1px;
}

/* BTM MORE2 */
#toppage .b_more2 { margin: auto; max-width: 130px;}
#toppage .b_more2 a { 
    position: relative;
    padding-left: 20px;
    color: #000;
    font-size: 125%;
    letter-spacing: 2px;
}
#toppage .b_more2 a::before,
#toppage .b_more2 a::after {
    display: block; clear: both; content:"";
    position: absolute;
    margin: auto;
    background: #000;
    transition: 0.3s;
}
#toppage .b_more2 a::before {
    top: 0; bottom: 0; left:0;
    width: 10px; height: 10px;
    border-radius: 10px;
}
#toppage .b_more2 a::after {
    left: 0; right: 0;
    bottom:-10px;
    width: 100%; height: 1px;
}
@media only screen and (min-width:768px){
    #toppage .b_more:hover a::before { left: 0;}
    #toppage .b_more2 a:hover { color: #026937; text-decoration: none;}
    #toppage .b_more2 a:hover::before,
    #toppage .b_more2 a:hover::after {background: #026937;}
    
}
@media only screen and (max-width:768px){
    #toppage h2 { margin-bottom: 40px;}
    #toppage h2 b { font-size:26px;}
    #toppage h2 small { font-size:18px; font-weight:500;}
}
@media only screen and (max-width:468px){
    #toppage h2 { margin-bottom: 20px;}
    #toppage h2 b { font-size: 24px;}
    #toppage h2 small { font-size:16px;}
    #toppage .b_more a,
    #toppage .b_more2 a { font-size: 100%;}

}

#toppage .bg { padding: 50px 0 0; background: url("../images/bg.jpg");}



/*========================================================
    Main
========================================================*/
#toppage .mainimg {
  text-align:center;
  width: 100%; height: 500px;
  background:url("../images/mainimg_bg.jpg") no-repeat center center;
  background-size: auto 100%;
}
#toppage .mainimg .main_box {
  position: relative;
  margin: auto;
  max-width:1000px;
  height: 500px;
}
#toppage .mainimg .main_box .catch {
  position: absolute; top:35%; right:20%;
  font-size:100%;
  text-align: left;
  color: #fff;
  text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
}
#toppage .mainimg .main_box .catch span:nth-child(1) { display: block;}
#toppage .mainimg .main_box .catch span:nth-child(2) { display: none;}
#toppage .mainimg .slide {
  position: absolute; top: 14%; left:16%;
  width: 280px; height: 280px;
  border-radius: 280px;
  overflow: hidden;
}
#toppage .mainimg .slide::after{
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 8;
    display: block; clear: both; content:"";
    margin: auto;
    width: 223px; height: 223px;
    border-radius: 280px;
    background:rgba(30, 40, 70, 0.5);
    box-shadow: 0px 0px 20px 0px rgba(66, 149, 196, 0.5), 0px 0px 20px 0px rgba(65, 149, 196, 0.5);
}
#toppage .mainimg .slide canvas { width: 100%; height: 100%; display: block; position: relative; z-index: 9;}
@media only screen and (max-width:1000px){
  #toppage .mainimg .main_box { max-width:768px;}
  #toppage .mainimg .main_box .catch { top:45%; right:5%;}
  #toppage .mainimg .slide { top: 14%; left:13%;}
}
@media only screen and (max-width:768px){
  #toppage .mainimg {
    background:url("../images/mainimg_bg_sp.jpg") no-repeat center center;
    background-size: auto 100%;
  }
  #toppage .mainimg .main_box .catch {
    top:30px; left: 0; right: 0;
    margin: auto;
      width: 180px;
    text-align: center;
  }
  #toppage .mainimg .main_box .catch span:nth-child(1) { display: none;}
  #toppage .mainimg .main_box .catch span:nth-child(2) { display: block;}
    #toppage .mainimg .slide {
    top:150px; left: 0; right: 0;
    margin: auto;
  }
}





/*========================================================
    About
========================================================*/
#toppage .about {
    position: relative;
    margin: 0 auto !important;
    width: 90%; height: 100%;
}
#toppage .about::after {
    display: block; clear: both; content:"";
    position: absolute;
    aspect-ratio: 1 / 1;
    top:10%; right: 0;
    width: 46%; max-width: 450px; height: auto;
    background:url("../images/logo_b.svg") no-repeat 120% bottom;
    background-size: 100% auto;
    mix-blend-mode:multiply;
    opacity: 0.1;
}
#toppage .about .inner { display: flex; justify-content: space-between; margin:0 auto;}
#toppage .about .cont_l { display: flex; flex-direction: column; gap:50px;}
#toppage .about .catch { position: relative; z-index: 99; display: flex; gap:10px; padding-top: 60px; padding-right: 30px;}
#toppage .about .catch span {
    display: block;
    width:30px; height:300px;
    text-indent: 0;
    font-weight: 400;
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 5px;
    vertical-align: top;
}
#toppage .about .photo { display: none;}
@media only screen and (max-width:1200px){
    #toppage .about { padding-bottom: 50px;}
}
@media only screen and (max-width:920px){
    #toppage .about { padding-left: 25%;}
}
@media only screen and (max-width:800px){
    #toppage .about { padding-left:0; margin-bottom: 0;}
    #toppage .about::after { top: inherit; bottom:40%; right:0;}
    #toppage .about .inner { margin:auto; flex-direction: column; gap:40px;}
    #toppage .about .cont_l { gap:40px;}
    #toppage .about .photo { display: block;}
    #toppage .about .photo img { width: 100%; height: 300px; object-fit: cover;}
    #toppage .about .cont_r { position: absolute; top:97%; right: 0;}
}
@media only screen and (max-width:768px){
    #toppage .about .cont_l { gap:40px;}
}
@media only screen and (max-width:468px){
    #toppage .about { padding-bottom: 0;}
    #toppage .about::after { width: 80%; bottom: 20%;}
    #toppage .about .cont_l { gap:30px; padding-bottom: 50px;}
    #toppage .about .catch span { font-size:80%;}
}


#toppage .pick_gallery {display: flex; }
#toppage .pick_gallery p {width: 33.3%; }
#toppage .pick_gallery p img { aspect-ratio: 6 / 4; width: 100%; height: auto; object-fit: cover;}
@media only screen and (max-width:768px){
    #toppage .pick_gallery { position:relative; flex-direction: column;}
    #toppage .pick_gallery p {width: 100%; }
    #toppage .pick_gallery p img { aspect-ratio: 16 / 5;}
    #toppage .pick_gallery::before {
        position: absolute; top: 0; left: 0; z-index: 9;
        display: block; clear: both; content:"";
        width:100%; height: 100%; 
        background-image: linear-gradient(90deg, transparent, #ffffff);
    }

}



/*========================================================
    Pickup
========================================================*/
#toppage .pickup .inner { display: flex; flex-direction: column; gap:100px; max-width: 1200px;}
#toppage .pickup .box,
#toppage .pickup .box a {
    display: flex; justify-content: space-between; gap:40px;
    position: relative;
    width: 100%;
    color: #222;
    text-decoration: none;
}
#toppage .pickup .box.pick2,
#toppage .pickup .box.pick2 a { flex-direction: row-reverse;}
#toppage .pickup .box::before {
    display: block; clear: both; content:"";
    position: absolute; top: 0;
    background-size:100% auto !important;
}
#toppage .pickup .box.pick1::before {
    left: -150px;
    aspect-ratio: 268 / 228;
    width: 220px; height:auto;
    background:url("../images/kazari_kaze.png") no-repeat;
}
#toppage .pickup .box.pick2::before {
    right: -100px;
    aspect-ratio: 224 / 214;
    width: 200px; height:auto;
    background:url("../images/kazari_kawa.png") no-repeat;
}
#toppage .pickup .box.pick3::before {
    left: -150px;
    aspect-ratio: 379 / 309;
    width: 220px; height:auto;
    background:url("../images/kazari_yama.png") no-repeat;
}
#toppage .pickup .box .txt {
    position: relative; z-index: 99;
    display: flex; align-items: center;
    width: 140px;
    font-size: 46px;
    text-indent: -9999px;
    background-size:100% auto !important;
}
#toppage .pickup .box .txt span {
    width: 28px; height: 100%;
    text-indent: 0;
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 5px;
} 
#toppage .pickup .box.pick1 .txt {
    aspect-ratio: 140 / 320;
    background: url("../images/txt_tanjyo.svg") no-repeat;
}
#toppage .pickup .box.pick2 .txt {
    aspect-ratio: 133 / 319;
    background: url("../images/txt_mokuteki.svg") no-repeat;
}
#toppage .pickup .box.pick3 .txt { 
    aspect-ratio: 140 / 324;
    background: url("../images/txt_enkaku.svg") no-repeat;
}
#toppage .pickup .box .cont { display: flex; flex-direction: column; gap:40px; width:calc(100% - 250px);}
#toppage .pickup .box .cont .mid {
    font-family: "Shippori Mincho", serif;
    font-size: 46px;
    color: #222;
    letter-spacing:10px;
}
@media only screen and (max-width:768px){
    #toppage .pickup .box .txt { width: 80px; font-size: 36px;}
    #toppage .pickup .box .cont { width:calc(100% - 100px);} 
    #toppage .pickup .box .cont .mid { font-size: 36px;}
    #toppage .pickup .box .cont .photo img  { width: 100%; height: 300px; object-fit: cover;}
}
@media only screen and (max-width:468px){
    #toppage .pickup .box { flex-direction: column !important; gap:20px;}
    #toppage .pickup .box.pick1::before,
    #toppage .pickup .box.pick2::before,
    #toppage .pickup .box.pick3::before { left:inherit; right: 0; width: 120px;}
    #toppage .pickup .box .txt { width: 50px !important; font-size: 26px;}
    #toppage .pickup .box .cont { width:100% !important;} 
    #toppage .pickup .box .cont .mid { font-size: 26px;}
    #toppage .pickup .box a .cont .photo img  { width: 100%; height: 250px; object-fit: cover;}
}

@media only screen and (max-width:468px){
    #toppage #toppage .pickup .inner { gap:40px}
}


/*========================================================
    Information
========================================================*/
#toppage .information { background: #fff;}
#toppage .information h2 { text-align: center;}
#toppage .information .b_more2 { margin-top: 40px; text-align: center;}
#toppage .information .info_list ul { max-width: 740px;}