@charset "utf-8";
/****************************************************************************************************



****************************************************************************************************/
@media print, screen and (min-width:737px){
}
@media print, screen and (min-width:1200px){
}
/****************************************************************************************************


****************************************************************************************************/
.vi{
    text-align: center;
}
    .vi__img.-sp{ width: 100%; }
    .vi__img.-pc{ display: none; }
@media print, screen and (min-width:737px){
    .vi__img.-sp{ display: none;}
    .vi__img.-pc{ display: inline; }
}
/****************************************************************************************************


****************************************************************************************************/
.titleBlock{
    /*トップインタビューのロゴ分、位置を補正*/
    margin-top: -90px;
}
@media print, screen and (min-width:737px){
.titleBlock{
    margin-top: -140px;
}
}
@media print, screen and (min-width:1090px){
.titleBlock{
    display: flex;
}
}
@media print, screen and (min-width:1200px){
.titleBlock{
    margin-left: auto;
    margin-right: auto;
    width: 1200px;
}
}


.titleBlock__inner{
    position: relative;
}
@media print, screen and (min-width:1090px){
.titleBlock__inner{
    margin-left: auto;
    width: 1090px;
}
}


.titleBlock__sub{
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    width: calc( 370 / 768 * 100% );
}
@media print, screen and (min-width:737px){
.titleBlock__sub{
    width: 100%;
}
}

.titleBlock__heading{
    padding-top: calc( 50 / 737 * 100% );
    text-align: right;
    line-height: 1;
}
@media print, screen and (min-width:737px){
.titleBlock__heading{
    padding-top: calc( 60 / 1090 * 100% );
}
}

.titleBlock__headingText{
    display: inline-block;
    padding: 10px 10px;
    background-color: rgba(27,132,193,0.9);
    color: #fff;
    line-height: 1.2;
    font-weight: bold;
}
    .titleBlock__headingText.-text1{
        font-size: calc( ( 24 / 768 * 100 ) * 1vw );
    }
@media print, screen and (min-width:737px){
    .titleBlock__headingText.-text1{
        font-size: 2.4rem;
    }
}

    .titleBlock__headingText.-text2{
        font-size: calc( ( 36 / 768 * 100 ) * 1vw );
        font-family:"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif;
    }
@media print, screen and (min-width:737px){
    .titleBlock__headingText.-text2{
        font-size: 5.0rem;
    }
}
/****************************************************************************************************


****************************************************************************************************/
.intro{
}

.intro__lead{
    margin-bottom: 20px;
    color: #1B84C1;
}
@media print, screen and (min-width:737px){
.intro__lead{
    margin-bottom: 40px;
}
}

.intro__anchorList{
}
@media print, screen and (min-width:737px){
.intro__anchorList{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
}


.intro__anchorListItem{
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #CCCCCC;
}
@media print, screen and (min-width:737px){
.intro__anchorListItem{
    margin-bottom: 10px;
    width: calc( 470 / 980 * 100% );
    line-height: 1.8;
}
    .intro__anchorListItem:last-child{ margin-bottom: 10px !important; }
}

.intro__anchorListTheme{
    margin-right: 10px;
    color: #1A84C0;
    font-family:"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif;
}
@media print, screen and (min-width:737px){
.intro__anchorListTheme{
    display: block;
}
}


.intro__anchorListLink{
    text-decoration: none;
}

a.intro__anchorListLink:link,
a.intro__anchorListLink:visited{
    color: #333;
}
/****************************************************************************************************

テーマボックス

****************************************************************************************************/
.theme{
}
.theme.-theme1 .talk,
.theme.-theme3 .talk{
    background-color: #F3FAFD;
}
.theme__block.-talk{
}
.theme__block.-img{
    text-align: center;
}
    .theme__block.-img.-blue{
        background-color: #F3FAFD;
    }

.theme__block.-notice{
    padding: 0 10px;
}
    .theme.-theme3 .theme__block.-notice{
        margin-top: 30px;
        margin-bottom: 30px;
    }
@media print, screen and (min-width:737px){
    .theme.-theme3 .theme__block.-notice{
        margin-top: 60px;
        margin-bottom: 60px;
    }
}



.theme__block.-message{
    padding: 30px 0;
}
@media print, screen and (min-width:737px){
.theme__block.-message{
    padding: 60px 0;
}
}
    .theme.-theme4 .theme__block.-message{
        padding: 0 0 30px;
    }
@media print, screen and (min-width:737px){
    .theme.-theme4 .theme__block.-message{
        padding: 0 0 60px;
    }
}
/****************************************************************************************************

会話

****************************************************************************************************/
.talk{
    padding: 30px 10px;
}
@media print, screen and (min-width:737px){
.talk{
    padding: 60px 10px;
}
}

.talk__inner{
}
@media print, screen and (min-width:1200px){
.talk__inner{
    margin: 0 auto;
    width: 1200px;
}
}

.talkBody{
}
@media print, screen and (min-width:980px){
.talkBody{
    margin: 0 auto;
    width: 980px;
}
}


/*--------------------------------------------------
テーマ
--------------------------------------------------*/
.talk__heading{
    margin-bottom: 10px;
    text-align: center;
}
@media print, screen and (min-width:737px){
.talk__heading{
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    text-align: left;
}
}
/*--------------------
番号
--------------------*/
.talk__headingNo{
    display: inline-block;
    margin-bottom: 5px;
    padding: 10px;
    background-color: #1C9FD9;
    color: #fff;
    font-family:"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif;
    text-align: center;
    line-height: 1.2;
}
@media print, screen and (min-width:737px){
.talk__headingNo{
    margin-right: 30px;
    width: 80px;
    line-height: 1.0;
}
}

    .talk__headingNoText.-text1{ font-size: 1.2rem; }
    .talk__headingNoText.-text2{ font-size: 2.4rem; }
@media print, screen and (min-width:737px){
    .talk__headingNoText.-text1{ font-size: 1.4rem; }
    .talk__headingNoText.-text2{ font-size: 4.2rem; }
}
/*--------------------
テーマ名
--------------------*/
.talk__headingText{
    position: relative;
    padding-top: 20px;
    font-size: 1.6rem;
    color: #1B84C1;
    font-family:"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif;
}
@media print, screen and (min-width:737px){
.talk__headingText{
    padding: 0 0 0 80px;
    font-size: 3.2rem;
    line-height: 1.5;
}
}

.talk__headingText::before{
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 20px;
    background-color: #1C9FD9;
}
@media print, screen and (min-width:737px){
.talk__headingText::before{
    top: 50%;
    left: 0;
    width: 60px;
    height: 1px;
}
}
/****************************************************************************************************

会話

****************************************************************************************************/
.talk__block{
    display: flex;
}
@media print, screen and (min-width:737px){
}


.talk__name{
    font-weight: bold;
    width: 40px;
    border-right-width: 1px;
    border-right-style: solid;
}
@media print, screen and (min-width:737px){
.talk__name{
    width: 60px;
}
}

    .talk__name.-name1{ border-right-color: #33197F; }
    .talk__name.-name2{ border-right-color: #DEAD36; }

.talk__text{
    flex: 1;
    padding-left: 10px;
}
@media print, screen and (min-width:737px){
.talk__text{
    padding-left: 20px;
}
}
/****************************************************************************************************

注釈

****************************************************************************************************/
.notice{
    padding: 10px;
    background-color: #F2F2F2;
    border-radius: 5px;
}
@media print, screen and (min-width:737px){
.notice{
    padding: 20px 30px;
    font-size: 1.4rem;
}
}
@media print, screen and (min-width:980px){
.notice{
    margin: 0 auto;
    width: 980px;
}
}
/*--------------------------------------------------
--------------------------------------------------*/
.noticeList{
}

.noticeList__item{
    position: relative;
    margin-bottom: 10px;
    padding-left: 4em;
    padding-bottom: 10px;
    border-bottom: 1px solid #A6A6A6;
}
.noticeList__item:last-child{
    border-bottom: none;
}

.noticeList__symbol{
    position:absolute;
    top:0;
    left:0;
}
/****************************************************************************************************

メッセージ

****************************************************************************************************/
.message{
    position: relative;
    padding: 0 10px;
}
@media print, screen and (min-width:737px){
.message{
    padding: 0;
}
}
@media print, screen and (min-width:1200px){
.message{
    margin: 0 auto;
    width: 1200px;
}
}

/*--------------------------------------------------
背景矩形
--------------------------------------------------*/
.message::before{
    content: '';
    position: absolute;
    z-index: 1;
    top: 100px;
    left: 0;
    width: 100%;
    height: 50%;
}
@media print, screen and (min-width:737px){
.message::before{
    top: 40px;
    padding-top: 320px;
    padding-top: calc( 320 / 1200 * 100% );
    height: 0;
}
}
@media print, screen and (min-width:1090px){
.message::before{
    right: 0;
    margin: auto;
    width: 1090px;
}
}
    .message.-message1::before{ background-color: #F5F3F8; }
    .message.-message2::before{ background-color: #FDFBF5; }
/*--------------------------------------------------
--------------------------------------------------*/
.message__inner{
    position: relative;
    z-index: 2;
}
@media print, screen and (min-width:737px){
.message__inner{
    display: flex;
}
}
@media print, screen and (min-width:1200px){
.message__inner{
    margin: 0 auto;
    width: 1200px;
}
}
/*--------------------------------------------------
写真
--------------------------------------------------*/
.message__img{
    margin-bottom: 20px;
    text-align: center;
}
@media print, screen and (min-width:737px){
.message__img{
    width: calc( 480 / 1200 * 100% );
}
    .message.-message1 .message__img{
        order: 2;
        margin: 0 0 0 auto;
    }
    .message.-message2 .message__img{
        order: 1;
        margin: 0 auto 0 0;
    }
}
@media print, screen and (min-width:1090px){
.message__img{
}
}
/*--------------------------------------------------
本文
--------------------------------------------------*/
.message__body{
    position: relative;
    text-align: center;
}
@media print, screen and (min-width:737px){
.message__body{
    margin-top: calc( 80 / 1200 * 100% );
    width: calc( 670 / 1200 * 100% );
}
    .message.-message1 .message__body{
        order: 1;
        margin-left: auto;
    }
    .message.-message2 .message__body{
        order: 2;
        margin-right: auto;
    }
}
/*--------------------------------------------------
テキスト
--------------------------------------------------*/
.message__text{
    -webkit-writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -ms-writing-mode: vertical-rl;
    writing-mode: vertical-rl;

    position: relative;
    padding: 20px 10px;
    display: inline-block;
    text-align: left;
    font-family:"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif;
    font-size: 1.6rem;
}
@media print, screen and (min-width:737px){
.message__text{
    font-size: 2.4rem;
}
}


/* かぎかっこ */
.message__text::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    border-top: 1px solid #333;
    border-right: 1px solid #333;
    width: 25px;
    height: 10px;
}
.message__text::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    border-bottom: 1px solid #333;
    border-left: 1px solid #333;
    width: 25px;
    height: 10px;
}
@media print, screen and (min-width:737px){
.message__text::before,
.message__text::after{
    width: 50px;
    height: 20px;
}
}




/****************************************************************************************************

reed

****************************************************************************************************/
.reed{
    padding: 30px 0;
    border-top: 1px solid #ccc;
}
@media print, screen and (min-width:737px){
.reed{
    padding: 60px 0;
}
}

/*--------------------------------------------------
--------------------------------------------------*/
.reedBody{
}
@media print, screen and (min-width:737px){
.reedBody{
    display: flex;
    align-items: center;
}
}
@media print, screen and (min-width:980px){
.reedBody{
    margin: 0 auto;
    width: 980px;
}
}
/*--------------------------------------------------
--------------------------------------------------*/
.reed__img{
    margin-bottom: 20px;
    text-align: center;
}
.reed__img img{
    width: 80%;
}
@media print, screen and (min-width:737px){
.reed__img img{
    width: 100%;
}
}
/*--------------------------------------------------
--------------------------------------------------*/
.reed__text{
    margin-left: auto;
    padding-left: 40px;
}
/*--------------------------------------------------
--------------------------------------------------*/
.reed__heading{
    margin-bottom: 10px;
    font-family:"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif;
    color: #33197F;
    font-size: 1.6rem;
    line-height: 1.5;
}
@media print, screen and (min-width:737px){
.reed__heading{
    margin-bottom: 20px;
    font-size: 2.4rem;
}
}
/*--------------------------------------------------
--------------------------------------------------*/
.reed__text .linkBtn__text{
}
@media print, screen and (min-width:737px){
.reed__text .linkBtn__text{
    font-size: 1.6rem;
}
}
/****************************************************************************************************

プロフィール

****************************************************************************************************/
.profile{
    padding: 30px 10px;
    background-color: #EEEEEE;
}
@media print, screen and (min-width:737px){
.profile{
    padding: 60px 0;
}
}
/*--------------------------------------------------
--------------------------------------------------*/
.profileBody{
}
@media print, screen and (min-width:737px){
.profileBody{
}
}
@media print, screen and (min-width:980px){
.profileBody{
    margin: 0 auto;
    width: 980px;
}
}
/*--------------------------------------------------
--------------------------------------------------*/
.profile__heading{
    margin-bottom: 15px;
    color: #1A84C0;
    font-family:"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif;
    font-size: 1.6rem;
    text-align: center;
}
@media print, screen and (min-width:737px){
.profile__heading{
    margin-bottom: 30px;
    font-size: 3.2rem;
}
}
/*--------------------------------------------------
--------------------------------------------------*/
.profile__block{
}
@media print, screen and (min-width:737px){
.profile__block{
    display: flex;
}
}
/*--------------------------------------------------
--------------------------------------------------*/
.profileBox{
    margin-bottom: 20px;
    padding: 20px 10px;
    background-color: #fff;
}
@media print, screen and (min-width:737px){
.profileBox{
    margin-bottom: 0;
    padding: 40px;
    width: calc( 470 / 980 * 100%);
}
}
    .profileBox.-profile1{ border-top: 1px solid #DEAD36; }
    .profileBox.-profile2{ border-top: 1px solid #331183; }
@media print, screen and (min-width:737px){
    .profileBox.-profile1{
        margin-right: calc( 40 / 980 * 100% );
    }
}
/*--------------------------------------------------
--------------------------------------------------*/
.profileBox__header{
    margin-bottom: 10px;
}
@media print, screen and (min-width:737px){
.profileBox__header{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
}
.profileBox__headerImg{
    margin-bottom: 10px;
    text-align: center;
}
@media print, screen and (min-width:737px){
.profileBox__headerImg{
    margin-bottom: 0;
    margin-right: calc( 40 / 390 * 100% );
    width: calc( 160 / 390 * 100% );
}
}
.profileBox__headerName{
    line-height: 1.5;
}

    .profileBox__headerNameText.-en{
        font-size: 1.4rem;
        font-family:"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif;
    }
        .profileBox.-profile1 .profileBox__headerNameText.-en{ color: #DEAD36; }
        .profileBox.-profile2 .profileBox__headerNameText.-en{ color: #331183; }


    .profileBox__headerNameText.-jp{
        font-size: 1.4rem;
        font-weight: bold;
    }
@media print, screen and (min-width:737px){
    .profileBox__headerNameText.-jp{
        font-size: 2.0rem;
    }
}