body{background-color:#000;overflow-x: hidden;}



.switch-area{display:flex;flex-wrap:wrap;}
.switch-area section{width:100%;}


body.top-karasu .switch-area {flex-direction:column;}
body.top-cafedawn .switch-area {flex-direction:column-reverse;}

body.top-karasu  .off_karasu{display:none;}
body.top-cafedawn .off_cafe{display:none;}


/* ---------------------------------------------------------
■ MV
--------------------------------------------------------- */

.mv_box{position:relative;}

.mv_text_area{
 position:absolute;
 top:4rem;
 left:4rem;
 color:#fff;
 text-align:left;
 z-index:3;
}

.mv_title{
 font-size:2.4rem;
 font-weight:700;
 line-height:1.35em;
 padding-bottom:.6rem;
}

.mv_linklist{
 display:flex;
 flex-wrap:wrap;
 gap:1rem;
 padding:1.5rem 0 0;
 max-width:18rem;
}
body.top-cafedawn .mv_linklist{flex-direction:column-reverse;}

.mv_linklist a{
 display:block;
 width:100%;
 position:relative;
 color:#e8e8e8;
 font-size:1.2rem;
 font-weight:700;
 letter-spacing:0.1em;
 text-align:center;
 padding:.75rem 0;
 border-radius:.4rem;
 filter:drop-shadow(0 0 .5rem rgba(0,0,0,.4));
 transition: .25s;
}
.mv_linklist a span{font-size:80%;}

.mv_linklist a::before{
 content: "";
 position:absolute;
 display:block;
 width:100%;
 height:100%;
 top:0;
 left:0;
 background-image:url("../img/index/mv_link_bk.webp");
 background-size:70%;
 background-position: center;
 border-radius:.95rem;
 opacity:0;
 transition: .25s;
}
.mv_linklist a::after{
 content: "";
 position: absolute;
 width: .6rem;
 height: .6rem;
 display: inline-block;
 border-top: 2px solid #fff;
 border-right: 2px solid #fff;
 top: calc(50% - .25rem);
 right: 1.2rem;
 transform: rotate(45deg);
 transition: .25s;
}


.mv_linklist a[href*="story"]{
 border:#a28038 solid .08rem;
 background-color:rgba(162,128,56,.65);
}

.mv_linklist a[href*="fortune"]{
 border:rgba(188,0,0,.5) solid .08rem;
 background-color:rgba(188,0,0,.25);
}

#topimg_box{position:relative;overflow-x: hidden;}
#topimg_box::after{
 content:"";
 display:block;
 position:absolute;
 bottom:-.05rem;
 left:0;
 width:100%;
 height:10vw;
 background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,1));
 z-index:3;
}

@media only screen and (min-width:768px) {
 .mv_linklist a:hover{text-shadow:0 0 2px rgba(0,0,0,1);}
 .mv_linklist a:hover::before{opacity:.8;}
 .mv_linklist a:hover::after{right:.6rem;filter:drop-shadow(0,0,2px,rgba(0,0,0,1));}
 .mv_linklist a[href*="story"]:hover{background-color:rgba(162,128,56,.8);border-color:rgba(162,128,56,0);}
 .mv_linklist a[href*="fortune"]:hover{background-color:rgba(188,0,0,.65);border-color:rgba(188,0,0,0);}
}


/* ---------------------------------------------------------
■ 
--------------------------------------------------------- */


/* ==============================
   スクロール誘導
============================== */
.scroll_action {
  position: fixed;
  left: 40px;
  bottom: 40px;
  z-index: 100;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;

  color: #fff;

  opacity: 1;
  visibility: visible;
  transform: translateY(0);

  transition:
    opacity 0.4s ease,
    visibility 0.4s ease,
    transform 0.4s ease;

  pointer-events: none;
}

/* 非表示時 */
.scroll_action.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
}

/* SCROLL文字 */
.scroll_action-text {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  writing-mode: vertical-rl;
}

/* 縦ライン */
.scroll_action-line {
  position: relative;
  width: 1px;
  height: 70px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.3);
}

/* 動く白ライン */
.scroll_action-line::before {
  position: absolute;
  top: -100%;
  left: 0;

  width: 100%;
  height: 100%;

  background-color: #fff;

  content: "";
  animation: scrollLine 2s ease-in-out infinite;
}

/* 下向き矢印 */
.scroll_action-arrow {
  position: absolute;
  right: -3px;
  bottom: 1px;

  width: 7px;
  height: 7px;

  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;

  transform: rotate(45deg);
}

/* ラインアニメーション */
@keyframes scrollLine {
  0% {
    top: -100%;
  }

  40% {
    top: 0;
  }

  70%,
  100% {
    top: 100%;
  }
}

/* 767px以下では非表示 */
@media screen and (max-width: 767px) {
  .scroll_action {
    display: none;
  }
}

/* 動きを減らす設定への対応 */
@media (prefers-reduced-motion: reduce) {
  .scroll_action-line::before {
    animation: none;
    top: 0;
  }
}

/* ---------------------------------------------------------
■ 導入
--------------------------------------------------------- */

.intro_area{
 position:relative;
}

.intro_bk{
 position:absolute;
 mix-blend-mode: hard-light;
 width:100%;
 height:100%;
 background-image:url("../img/index/index_bk01.webp");
 background-repeat: no-repeat;
 background-position: left top;
 background-size: 80%;
}

.intro_box{
 position:relative;
 padding:6rem 2rem;
 z-index:3;
}

.intro_main{
 position:relative;
 margin:0 auto;
 width:fit-content;
 color:#e8e8e8;
 font-family: "Noto Sans JP", sans-serif;
 padding:0 1.6rem;
}
.intro_main::before,.intro_main::after{
 content:"";
 display:block;
 position:absolute;
 background-image: url("../img/index/intro_frame.webp");
 background-repeat: no-repeat;
 background-size: contain;
 width:2rem;
 height:140%;
 top:50%;
 transform:translateY(-50%);
}
.intro_main::before{
 left:-2rem;
}
.intro_main::after{
 right:-2rem;
 transform:translateY(-50%) scale(-1,1);
}

.intro_main h1{
 line-height:1.2em;
 font-size:3rem;
 font-weight:600;
 padding:0 0 .8rem;
}

.intro_main p{
 font-size:1.1rem;
 letter-spacing:.1em;
}

.intro_link{
 display:flex;
 flex-wrap: wrap;
 justify-content:flex-end;
 padding:.5rem 0 0;
}
.intro_link a{
 position:relative;
 display:block;
 color:#a28038;
 font-size:1.1rem;
 font-family: "Noto Serif JP", serif;
 padding:0 2.3rem .2rem .05rem;
 transition:.25s;
}
.intro_link a::before{
 content: "";
 position: absolute;
 bottom:0;
 right:0;
 background-color:#a28038;
 width:100%;
 height:1px;
 transition:.25s;
}
.intro_link a::after{
 content: "";
 position: absolute;
 width: .4rem;
 height: .4rem;
 display: inline-block;
 border-top: 2px solid #a28038;
 border-right: 2px solid #a28038;
 top: calc(50% - .25rem);
 right:.2rem;
 transform: rotate(45deg);
 transition: .25s;
}
@media only screen and (min-width:768px) {
 .intro_link a:hover{color:rgba(255,255,255,.45);}
 .intro_link a:hover::before{width:0;}
 .intro_link a:hover::after{border-color:rgba(255,255,255,.45);}
}


.character_main{
 padding:4rem 0 0;
}

.character_main h2{
 color:#a28038;
 font-size:3rem;
 font-weight:800;
 letter-spacing:0.07em;
 padding:0 0 1rem;
}

.character_box{
 margin:0 auto;
 display:flex;
 flex-wrap:wrap;
 justify-content: center;
 max-width:calc(1300px - 4rem);
 gap:1rem;
}

.character_box a{
 width:calc((100% - (1rem*3))/ 4);
 transition: .25s;
}

.character_box a img{border-radius:.4rem;transition: .25s;}

.character_box a[href*="len"] img{background-color:rgba(79,58,184,.2);}
.character_box a[href*="shino"] img{background-color:rgba(255,171,180,.2);}
.character_box a[href*="tsutsuji"] img{background-color: rgba(255,83,140,.2);}
.character_box a[href*="haku"] img{background-color:rgba(178,222,234,.2);}


@media only screen and (min-width:768px) {
 .character_box a:hover img{filter: brightness(1.07);transform:scale(1.03);}
 .character_box a[href*="len"]:hover img,
 .character_box a[href*="shino"]:hover img,
 .character_box a[href*="tsutsuji"]:hover img,
 .character_box a[href*="haku"]:hover img{background-color:rgba(0,0,0,0);}
}

.character_box a p{
 margin: auto;
 width:fit-content;
 position:relative;
 color:#e8e8e8;
 font-size:1.5rem;
 font-weight:800;
 letter-spacing:.1rem;
 padding:.3rem 0 .15rem;
}

.character_box a p::after{
 content:"";
 display:block;
 position:absolute;
 bottom:-.1rem;
 height:2px;
 background-color:#e8e8e8;
}

@keyframes Sliding {
 0% {width:0%;left:0;}
 50% {width:100%;left:0;}
 51% {width:100%;left:auto;right:0;}
 100% {width:0%;left:auto;right:0;}
}

@media only screen and (min-width:768px) {
 .character_box a:hover p::after{
  animation: Sliding .4s;
 }
}




.intro_links{
 margin:0 auto;
 display:flex;
 flex-wrap:wrap;
 justify-content: center;
 max-width:500px;
 padding:2rem 0;
}

.intro_links a{
 display:block;
 width:100%;
 position:relative;
 color:#e8e8e8;
 font-size:1.2rem;
 font-weight:700;
 letter-spacing:0.1em;
 text-align:center;
 padding:.75rem 0;
 border-radius:.5rem;
 filter:drop-shadow(0 0 .5rem rgba(0,0,0,.4));
 transition: .25s;
}
.intro_links a span{font-size:80%;}

.intro_links a::before{
 content: "";
 position:absolute;
 display:block;
 width:100%;
 height:100%;
 top:0;
 left:0;
 background-image:url("../img/index/mv_link_bk.webp");
 background-size:40%;
 background-position: center;
 border-radius:.8rem;
 opacity:.8;
 transition: .25s;
}
.intro_links a::after{
 content: "";
 position: absolute;
 width: .6rem;
 height: .6rem;
 display: inline-block;
 border-top: 2px solid #fff;
 border-right: 2px solid #fff;
 top: calc(50% - .25rem);
 right: 1.2rem;
 transform: rotate(45deg);
 transition: .25s;
}


.intro_links a[href*="story"]{
 border:rgba(162,128,56,.5) solid .08rem;
 background-color:rgba(162,128,56,.4);
}

.intro_links a[href*="fortune"]{
 border:rgba(188,0,0,.2) solid .08rem;
 background-color:rgba(188,0,0,.25);
}

body.top-cafedawn .intro_links a[href*="story"]{display:none;}
body.top-karasu .intro_links a[href*="fortune"]{display:none;}

@media only screen and (min-width:768px) {
 .intro_links a:hover{text-shadow:0 0 2px rgba(0,0,0,1);}
 .intro_links a:hover::before{opacity:.2;}
 .intro_links a:hover::after{right:.6rem;filter:drop-shadow(0,0,2px,rgba(0,0,0,1));}
 .intro_links a[href*="story"]:hover{background-color:rgba(162,128,56,.55);border-color:rgba(162,128,56,.2);}
 .intro_links a[href*="fortune"]:hover{background-color:rgba(130,0,0,0.65);border-color:rgba(188,0,0,0);}
}



/* ---------------------------------------------------------
■ 物語
--------------------------------------------------------- */

.story_area{position: relative;}
.story_bk{
 position:absolute;
 top:0;
 left:0;
 mix-blend-mode: hard-light;
 width:100%;
 height:100%;
 background-image:url("../img/index/index_bk01.webp");
 background-repeat: no-repeat;
 background-position: left top;
 background-size: 80%;
 z-index:1;
 transform: scale(-1,1);
}

.story_box{position: relative;}

.story_top_bk{
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background-image:url("../img/index/story_bk.webp");
 background-position: center top;
 background-repeat: no-repeat;
 background-size: 100%;
 opacity:.24;
 z-index:2;
}

.story_main{
 position:relative;
 padding:5rem 2rem;
 z-index:3;
}

.story_main h2{
 color:#a28038;
 font-size:4rem;
 font-weight:800;
 letter-spacing:0.07em;
 padding:0 0 3rem;
}

.story_main p{
 font-size:1.3rem;
 color: #e8e8e8;
 font-weight:600;
 letter-spacing:.15em;
 padding-bottom:2.2rem;
}
.story_main p.big{
 font-size:2rem;
}

.story_main p a{
 color:#e8e8e8;
 text-decoration:underline;
}

.secret-text {
  display: inline-block;
  filter: blur(.3rem);
  background: repeating-linear-gradient(
    10deg,
    rgba(0,0,0,0.2) 0,
    rgba(0,0,0,0.2) .1rem,
    rgba(255,255,255,0.2).25rem
  );
  border-radius: 4px;
  cursor: pointer;
  transition: filter .3s ease, background .3s ease;
}
@media only screen and (min-width: 768px) {
 .secret-text:hover {
  filter: blur(0);
  background:rgba(255,255,255,0);
  opacity:.9;
 }
}

.story_karasu-logo{
 margin:auto;
 max-width:300px;
 padding:1rem 0 4rem;
}

.story_img_list{
 display: flex;
 flex-wrap:wrap;
 padding:5rem 0;
 margin:0 auto;
 max-width:calc(1200px - 4rem);
}
.story_img_list img{position:relative;filter:drop-shadow(0 0 .25rem rgba(0,0,0,.4));border-radius:.2rem;}
.story_img_list img[src*="01"]{width:31%;margin:auto -3% 0 0;}
.story_img_list img[src*="02"]{width:27%;margin:auto -2% -3rem 0;}
.story_img_list img[src*="03"]{width:24%;margin:-2rem -3% auto 0;z-index:2;}
.story_img_list img[src*="04"]{width:26%;margin:auto -3% 0 0;}


.story_link{
 margin: auto;
 max-width:300px;
}

.story_link a{
 display:block;
 width:100%;
 position:relative;
 color:#e8e8e8;
 font-size:1.2rem;
 font-weight:700;
 letter-spacing:0.1em;
 text-align:center;
 padding:.75rem 0;
 border-radius:.5rem;
 filter:drop-shadow(0 0 .5rem rgba(0,0,0,.4));
 border:rgba(162,128,56,.8) solid .08rem;
 transition: .25s;
}
.story_link a span{font-size:80%;}

.story_link a::before{
 content: "";
 position:absolute;
 display:block;
 width:100%;
 height:100%;
 top:0;
 left:0;
 background-image:url("../img/index/mv_link_bk.webp");
 background-size:40%;
 background-position: center;
 border-radius:.8rem;
 opacity:.8;
 transition: .25s;
}
.story_link a::after{
 content: "";
 position: absolute;
 width: .6rem;
 height: .6rem;
 display: inline-block;
 border-top: 2px solid #fff;
 border-right: 2px solid #fff;
 top: calc(50% - .25rem);
 right: 1.2rem;
 transform: rotate(45deg);
 transition: .25s;
}

@media only screen and (min-width:768px) {
 .story_link a:hover{background-color:rgba(162,128,56,.2);border-color:rgba(162,128,56,.2);}
 .story_link a:hover::before{opacity:0;}
 .story_link a:hover::after{right:.6rem;filter:drop-shadow(0 0 2px rgba(0,0,0,1));}
}


.story_bk_bottom{
 position:absolute;
 bottom:0;
 left:0;
 mix-blend-mode: hard-light;
 width:100%;
 height:auto;
 aspect-ratio:2 / 1;
 background-image:url("../img/index/index_bk01.webp");
 background-repeat: no-repeat;
 background-position: left top;
 background-size: 80%;
 z-index:1;
 transform: rotate(180deg) scale(-1,1);
}



/* ---------------------------------------------------------
■ CAFE DAWN
--------------------------------------------------------- */

.oracle_area{
 margin-top:4vw;
 position:relative;
 background-color:#7a0000;
}

.oracle_area::before{
 content:"";
 display:block;
 position:absolute;
 top:-4vw;
 left:0;
 background-color:#7a0000;
 width:100%;
 height:8vw;
 border-radius:50%;
 z-index:2;
}
.oracle_area::after{
 content:"";
 display:block;
 position:absolute;
 top:-8.4vw;
 left:50%;
 width:60%;
 height:8vw;
 background-image:url("../img/index/cafe_top-frame.webp");
 background-repeat: no-repeat;
 background-position: left top;
 background-size:100%;
 transform:translateX(-50%);
 z-index:2;
}

.oracle_box{
 overflow-x: hidden;
 position:relative;
 padding:0 2rem;
 z-index:3;
}

.oracle_intro{
 position:relative;
}
.oracle_intro::before,.oracle_intro::after{
 content:"";
 display:block;
 position:absolute;
 top:0;
 width:25rem;
 height:100%;
 background-image:url("../img/index/cafe_side-frame.webp");
 background-repeat: no-repeat;
 background-position:left top;
 background-size:100%;
 z-index:2;
}

.oracle_intro::before{left:-3rem;}
.oracle_intro::after{right:-3rem;transform:scale(-1,1);}

.oracle_intro_text{
 position:relative;
 z-index: 3;
}

.oracle_intro_text p{
 font-size:1.3rem;
 color: #e8e8e8;
 font-weight:600;
 letter-spacing:.15em;
 padding-bottom:2.2rem;
}
.oracle_intro_text p.big{
 font-size:2rem;
}

.oracle_intro_img{
 margin: auto;
 max-width:900px;
 padding:3rem 0;
}

.oracle_intro_img img{
 border-radius:.3rem;
 filter:drop-shadow(0 0 4px rgba(0,0,0,.4));
}




.oracle_menu_h2box{
 margin: auto;
 max-width:500px;
}
.oracle_menu_h2box h2{
 color:#a28038;
 font-size:3.5rem;
 font-weight:800;
 letter-spacing:0.07em;
 padding:0 0 3rem;
}


.oracle_menu_list{
 margin: auto;
 max-width:1200px;
 display:flex;
 flex-wrap: wrap;
 gap:2rem;
 padding-bottom:5rem;
}

.oracle_menu_item{
 position:relative;
 width:calc((100% - 2rem)/ 2);
 background-image:url("../img/index/menu_btn-corner-top-l.webp"),url("../img/index/menu_btn-corner-top-r.webp"),url("../img/index/menu_btn-corner-bottom-r.webp"),url("../img/index/menu_btn-corner-bottom-l.webp");
 background-size:3rem;
 background-repeat:no-repeat;
 background-position:left top,right top,right bottom,left bottom;
}


.oracle_menu_item::before,.oracle_menu_item::after{
 content:"";
 position:absolute;
 display:block;
 top:50%;
 left:50%;
 transform:translateX(-50%) translateY(-50%);
 background-size:3rem;
}

.oracle_menu_item::before{
 width:calc(100% - 3rem - 3rem);
 height:100%;
 background-image:url("../img/index/menu_btn-row-top.webp"),url("../img/index/menu_btn-row-bottom.webp");
 background-repeat:repeat-x;
 background-position:top center,bottom center;
}
.oracle_menu_item::after{
 width:100%;
 height:calc(100% - 3rem - 3rem);
 background-image:url("../img/index/menu_btn-column-l.webp"),url("../img/index/menu_btn-column-r.webp");
 background-repeat:repeat-y;
 background-position:center left,center right;
}

.oracle_menu_item.personal{
 margin: auto;
 width:100%;
 max-width:800px;
 background-color:rgba(188,0,0,.4);
 border-radius:1rem;
}
.oracle_menu_item.daily{
 width:100%;
}

.oracle_menu_item.sns{
 margin: auto;
 width:fit-content;
 display:flex;
 flex-wrap: wrap;
 gap:4rem;
 padding:3.2rem 6rem 3rem;
}
.oracle_sns_title{
 position:absolute;
 top:-1.3rem;
 left:50%;
 color:#a28038;
 font-size:3rem;
 font-weight:800;
 line-height:1em;
 letter-spacing:0.07em;
 transform: translateX(-50%);
 padding:0 .3em;
 background-color:#7A0000;
}
.oracle_menu_item.sns a{
 position:relative;
 display:block;
 margin:auto 0;
 width:2.4rem;
 line-height:0;
 z-index: 2;
 transition: .25s;
}
.oracle_menu_item.sns a[href*="note"]{width:4rem;}
@media only screen and (min-width:768px) {
 .oracle_menu_item.sns a:hover{
  opacity:.7;
 }
}

.oracle_menu_item.moon .oracle_menu_text{display:contents;}
.oracle_menu_item.moon .oracle_menu_pra{width:70%;}
.oracle_menu_item.moon .oracle_menu_img{margin: auto auto -2.25rem -1rem;}
.oracle_menu_item.moon .oracle_menu_img img{width:calc(100% + 2rem);}

.oracle_menu_item.sunmoon .oracle_menu_text{display:contents;}
.oracle_menu_item.sunmoon .oracle_menu_pra{width:70%;}
.oracle_menu_item.sunmoon .oracle_menu_img{margin: auto auto -2.25rem -2rem;}
.oracle_menu_item.sunmoon .oracle_menu_img img{width:calc(100% + 4.2rem);}

.oracle_menu_item.daily .oracle_menu_text{width:50%;}
.oracle_menu_item.daily .oracle_menu_img{width:50%;margin: auto auto -2.25rem -4rem;}
.oracle_menu_item.daily .oracle_menu_img img{width:calc(100% + 4.2rem);}


.oracle_menu_detail{
 display:flex;
 flex-wrap: wrap;
 position:relative;
 z-index: 3;
 padding:3rem;
 color:#e8e8e8;
}

.oracle_menu_text{width:70%;}

.oracle_menu_title{display:flex;flex-wrap:wrap;width:100%;}
.oracle_menu_title h3{
 position:relative;
 text-align: left;
 font-size:2.5rem;
 line-height:1.2em;
 font-weight:600;
 padding-left:1.5em;
}
.oracle_menu_title h3::before{
 content:"";
 position: absolute;
 left:0;
 top:0;
 display:block;
 width:auto;
 height:100%;
 aspect-ratio:1 / 1;
 background-position: center;
 background-repeat: no-repeat;
 background-size: 100%;
}
.personal .oracle_menu_title h3::before{background-image: url("../img/index/menu_icon01.webp")}
.moon .oracle_menu_title h3::before{background-image: url("../img/index/menu_icon02.webp")}
.sunmoon .oracle_menu_title h3::before{background-image: url("../img/index/menu_icon03.webp")}
.daily .oracle_menu_title h3::before{background-image: url("../img/index/menu_icon04.webp")}

.oracle_menu_title p{
 margin: auto 0 0;
 padding:0 0 .1rem .7rem;
}

.oracle_menu_pra{
 padding:.8rem 0 0;
 text-align: left;
 font-family: "Noto Sans JP", sans-serif;
 letter-spacing:0.1em;
}

.oracle_menu_pra p{padding-bottom:1.3rem;}

.oracle_menu_pra a{
 position:relative;
 display:block;
 text-align: center;
 max-width:260px;
 color:#950001;
 background-color:#e8e8e8;
 border:#e8e8e8 2px solid;
 border-radius:3em;
 padding:.2rem 2rem;
 font-weight:700;
 filter:drop-shadow(0 0 .3rem rgba(0,0,0,.4));
 transition:.25s;
}
.oracle_menu_pra a::after{
 content: "";
 position: absolute;
 width: .6rem;
 height: .6rem;
 display: inline-block;
 border-top: 2px solid #950001;
 border-right: 2px solid #950001;
 top: calc(50% - 0.3rem);
 right: 1rem;
 transform: rotate(45deg);
 transition: .25s;
}
@media only screen and (min-width:768px) {
 .oracle_menu_pra a:hover{
  color:#e8e8e8;
  background-color:rgba(255,255,255,0);
  filter:drop-shadow(0 0 .3rem rgba(0,0,0,0));
 }
 .oracle_menu_pra a:hover::after{border-color:#e8e8e8;}
}

.oracle_menu_img{width:30%;margin: auto 0;}
.oracle_menu_img p{font-size:.7rem;font-family: "Noto Sans JP", sans-serif;line-height:1.2em;}




/*==========================
ディレクター
===========================*/

.director_box{
	padding:3rem 2rem;
}

.director_wrap{
	margin:auto;
	max-width:1200px;
	padding:3rem;
 color:#e8e8e8;
 text-align:left;
}

.director_title{
	display:flex;
	flex-wrap: wrap;
	gap:1rem;
}
.director_img{width:7rem;margin:auto 0;}
.director_name{width:calc(100% - 9rem);}
.director_name h2{
 line-height: 1em;
 font-size:1.4rem;
 font-weight: 800;
 padding-bottom:.4rem;
}
.director_name h2 span{
	font-size:70%;
}

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

.director_name h3{
 line-height: 1em;
 font-size:2.5rem;
 font-weight: 800;
 padding-bottom:.5rem;
}
.director_namesub{
	font-size:.9rem;
}

.director_namelinks{
	display: flex;
	flex-wrap: wrap;
	gap:1rem;
	padding:0 1rem;
}
.director_namelinks a{
	display: block;
	margin: .8rem 0 auto;
	width:1.8rem;
 transition: .2s;
}

.director_text{padding-top:1rem;}
.director_text p{
 padding-bottom:1rem;
 font-size:.9rem;
 font-weight: 600;
 line-height: 1.55em;
 letter-spacing: 0.04em;
}
.director_text a{
	color:#e8e8e8;
 text-decoration:underline;
 transition: .2s;
}

@media only screen and (min-width:768px) {
 .director_namelinks a:hover{opacity:.7;}
 .director_text a:hover{opacity:.7;}
}