@charset "UTF-8";

/*
Theme Name: ys_MiRiSE-interview
Author: Yazuya BtoB business 
Description: This is original theme for only interview page.
*/


/******* インタビューページメイン *******/

main{
    max-width:1000px !important;
    margin:auto !important; 
    line-height: 1.8;
}

.lp .wrapper{
    margin: 5% auto;
    text-align: center;
}

.abstract-text{
    margin: 2em auto 3em;
    width:clamp(300px,75%,750px);
    font-weight:500;
    font-size:clamp(16px,3.6vw,18px);
    text-align: left;
}

p{
    margin:2em auto;
    font-size:clamp(14px,3.2vw,16px);
    width:90%;
    max-width:800px;
    text-align: left;
}

a, a:visited{
    color:#404040;
    text-decoration: none;
}


h2{
    width:90%;
    margin:auto;
    font-size: clamp(28px,5vw,36px);
    text-align:left;
    line-height:1.5;
    padding: 5px 20px ;/*文字回りの余白（上下 左右）*/
    display: block;
    border-left: 12px solid #42B4CC;
    position: relative;
}

h2:before {
    content: "";
    display: block;
    position: absolute;
    left: 3px;
    top: 0;
    width: 2px;/*二重線右側の太さ（幅）*/
    height: 100%;
    background: #42B4CC;/*二重線右側の色*/
}

h2::first-letter{
    font-weight: 700;
    color: orange;
    border-top:3px solid orange;
    }
    

@media screen and (min-width: 768px){
    
    h2{
    width: 80%;
    text-align:left;
    padding: 1em auto 2em 20%;
    border-bottom: 3px solid #42B4CC;
    border-left: none;
    }

    h2::before{
        display:none;
    }


}

.h2-title{
    font-size: clamp(18px,3vw,24px);/*文字サイズ*/
    font-weight: 700;

}

.shadow{
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/****** 目次 ******/

#menu h2{
    margin:auto;
    text-align:center;
    line-height:1.8;
    padding: 10px 0;/*文字回りの余白（上下 左右）*/
    display: block;
    border:none;
}

#menu h2:before {
    width: 0;/*二重線右側の太さ（幅）*/
}

#menu h2::first-letter{
    font-weight: auto;
    color: #404040;
    border: none;
    }

.menu-container{
    margin: 0 auto;
    width:80%;
    border:3px solid #42B4CC;
    border-radius: 12px;
    padding:0 10% 1em;
    line-height: 2;
}

.menu-container ul>li a{
    text-align: left;
    width:90%;
    line-height:1.8;
    padding: 0 10px;/*文字回りの余白（上下 左右）*/
    margin: 10px 0;
    display: block;
    border-left:1px solid #42B4CC;
}
.menu-container ol{
    list-style-type: decimal-leading-zero;
}
.menu-container ol>li a{
    border-left:none;
}

.menu-container ol>li::marker{
    color: #42B4CC;
    font-weight:400;
    padding-right:10px;
}

@media screen and (max-width: 767px){

    .menu-container{
    width:90%;
}

}
/**************** 人物紹介 ****************/

#profile li{
    margin:2em auto;
}

.icon{
    background-color:gray;
    border-radius: 50%;
    width:clamp(150px,25vw,250px);
    height:clamp(150px,25vw,250px);
}

.position-wrapper{
    position: relative;
    margin: auto;
    width:80%;
    height:clamp(300px,50vw,400px);
}

.position-wrapper .icon{
    position:absolute;
    left:0;
    top:0;
    z-index:999;
}

.position-wrapper p{
    background-color:#76C0CF;
    border-radius: 12px;
    padding: 2em;
    margin-top: 0;
    width: auto;
    position: absolute;
    left:clamp(150px,22.5vw,230px);
    top:30%;
    z-index: 998;
    text-align: left;
}

#profile li:nth-child(2) .icon{
    position:absolute;
    left: auto;
    right:0;
    top:0;
    z-index:999;
}

#profile li:nth-child(2) p{
    left: auto;
    right:clamp(150px,22.5vw,230px);
    top:30%;
    z-index: 998;
}


@media screen and (max-width: 800px){
.position-wrapper{
    height:clamp(400px, 50vw, 600px);
}
    .position-wrapper .icon,#profile li:nth-child(2) .icon{
        position: absolute;
        left:0;
        right:0;
        top:-5%;
        margin:0 auto;
        z-index:999;
    }

.position-wrapper p,#profile li:nth-child(2) p{
    width:100%;
    position: absolute;
    left:0;
    top:120px;
    z-index: 998;
    }
}

/**************** インタビュー *****************/

/************* チャプター１ コラージュ風　*************/

#chapter1 img{
    width:80%;
    text-align: center;
    vertical-align:middle;
}

.figure{
    position:relative;
    width:100%;
    margin:20% auto;
}

#chapter1 .figure img:nth-of-type(1){
    width:35%;
    z-index: 3;
    position: absolute;
    top:-20%;
    left:5%;
}
#chapter1 .figure img:nth-of-type(2){
    z-index:2;
    width:70%;
}
#chapter1 .figure img:nth-of-type(3){
    width:35%;
    z-index: 3;
    position: absolute;
    bottom:-20%;
    right:5%;
}

/***************** チャプター２　対談形式 ******************/


:root {
  --corner-chat-icon-bgcolor: orange;/* アイコン背景色(透過PNGへの配慮) */

  --corner-chat-text-radius: 12px;
  --corner-chat-text-bgcolor: #76C0CF;/* テキスト背景色 */

  --chat-width-max: 500px;/* 吹き出しの横幅最大値, 不要ならこの一行削除 */
  --chat-margin: 2em;/* 前後要素との距離 */

  --chat-icon-size: 80px;/* アイコン画像のサイズ */

  --chat-text-padding: 10px 15px;/* テキスト内余白 (上下10px 左右15px) */
  --chat-text-font-size: 14px;/* テキスト文字大きさ */
}

.chat-wrapper{
    width:90%;
    margin: auto;
}
.chat {
  display: flex;
  align-items: flex-start;
  width: 100%;
  margin: var(--chat-margin) auto;
}

.chat__r {
  justify-content: flex-end;
}

.chat__r .chat__icon {
  order: 1;
}

.corner__chat {
  align-items: flex-end;
  gap: 0 10px;
  position: relative;
}

.corner__chat .chat__icon {
  width: 80px;
  height: 80px;
  margin-bottom: 6px;
  border-radius: 50%;
  background-color: var(--corner-chat-icon-bgcolor);
  background-image: url(https://st.mirise.me//wp-content/uploads/icon_01.png);/* 左画像 */
  flex-shrink: 0;
  width: var(--chat-icon-size);
  height: var(--chat-icon-size);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.corner__chat.chat__r .chat__icon {
  background-image: url(https://st.mirise.me//wp-content/uploads/icon_02.png);/* 右画像 */
    flex-shrink: 0;
  width: var(--chat-icon-size);
  height: var(--chat-icon-size);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.chat__icon{
    position: relative;
}

.chat__icon span{
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    position:absolute;
    top:-25%;
    left:18px;
}

.corner__chat .chat__text {
  min-height: 60px;
  border-radius: var(--corner-chat-text-radius);
  border-bottom-left-radius: 0;
  background: var(--corner-chat-text-bgcolor);
  color: var(--corner-chat-text-color);
  position: relative;
  max-width: var(--chat-width-max, initial);
  padding: var(--chat-text-padding);
  font-size: var(--chat-text-font-size);
}

.corner__chat.chat__r .chat__text {
  border-radius: var(--corner-chat-text-radius);
  border-bottom-right-radius: 0;
  position: relative;
  max-width: var(--chat-width-max, initial);
  padding: var(--chat-text-padding);
  font-size: var(--chat-text-font-size);
}

.corner__tail {
  display: flex;
  align-items: flex-end;
  position: absolute;
  bottom: 0px;
  left: 54px;
  width: 38px;
  height: 38px;
  color: var(--corner-chat-text-bgcolor);
  overflow: hidden;
}

.corner__tail svg {
  width: 100%;
  height: auto;
  margin-bottom: -1px;
}

.chat__r .corner__tail {
  left: auto;
  right: 54px;
}

.chat__r .corner__tail svg {
  transform: scale(-1,1);
}

.chat__text{
    text-align: left;
}




/***************** 問い合わせ先 ***************/

.bg-wrapper{
    background: repeating-linear-gradient(-45deg, #3f87a6, #ebf8e1 60%, #f69d3c 100%);
    padding-bottom:1em;
}

.grid-wrapper{
    width: 90%;
    padding: 2em 0;
    display: grid;
    grid-template-rows: repeat(5, 100px);
    grid-template-columns: repeat(6, 1fr);
}

.grid-wrapper .logo{
    width: 85%;
    grid-row:1;
    grid-column:1 / 4;
    z-index: 2;
}

.grid-wrapper .logo .h2-title{
    font-size:1.25em;
    text-align: center;
}

.grid-wrapper .tablet{
    width: 100%;
    grid-row:1 / 6;
    grid-column:3/ 7;
    z-index: 1;
    align-self: center;
}

.grid-wrapper .contact-btn{
    margin-top: 1em;
    grid-row: 5/6;
    grid-column: 1 / 4;
}

.grid-wrapper p{
    grid-row: 2/5;
    grid-column: 1 / 4;
    text-align: left;
    z-index: 3;
    align-self: center;
}

.grid-wrapper p span{
    font-size:clamp(30px,3.6vw,36px);
    font-weight: 700;
   
    background-color:#ffffff;
}

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

.grid-wrapper{
    grid-template-rows: repeat(5, auto);
    grid-template-columns: 100%;
}

.grid-wrapper .logo{
    width: 60%;
    grid-row: 1;
    grid-column: auto;
}

.grid-wrapper .logo .h2-title{
    font-size:1em;
    text-align: center;

}

.grid-wrapper .tablet{
    width: 90%;
    grid-row: 2 / 4;
    grid-column: auto;
    justify-self: right;

}

.grid-wrapper p{
    margin: -3em auto 2em;
    grid-row: 4 / 5;
    grid-column: auto;
    text-align: left;
}

.grid-wrapper .contact-btn{
    grid-column: auto;
    grid-row: 5/6;
    margin: 0;

}
}

@media screen and (max-width: 950px){

    .grid-wrapper .contact-btn{
    grid-column: 1/7;
    grid-row: 5/6;
}
}

/************ ウィジェット部分削除 **************/
aside{
    display: none;
}