@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Noto+Serif+JP:wght@200..900&family=Shippori+Mincho:wght@400;500;600;700&display=swap');
/* CSS Document */
/* ==================================================
    BASE (RESET)FONT
================================================== */
html { font-size: 100%;}
body {
    background-color:#024d92;
	font-size: 13px;
	font-feature-settings: "palt" 1;
	-webkit-font-smoothing: antialiased; /* WebKitブラウザサポート */
	text-rendering: optimizeLegibility; /* Chrome、Safariサポート */
	-moz-osx-font-smoothing: grayscale; /* Firefoxサポート */
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%; /* iPhoneの文字サイズバグの回避 */
    overflow-x: hidden;

    color:#000;
    line-height:2.2;
    
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-weight:400;
    font-style: normal;
}
.font {
    font-family: "Noto Sans JP", sans-serif;
}
img {
    display: block;
    width: 100%;
}


/* ==================================================
    LINK
================================================== */
a { line-height: 1.2; text-decoration:none; }
a:link { color: #024d92; transition: .2s ease-in-out; text-decoration: underline; }
a:visited { color: #024d92; }
a:hover { color: #14384f; text-decoration: underline;}
a:active { color: #024d92; }
a img { opacity:1.0; transition: .2s ease-in-out;}
a img:hover { opacity: .7 !important; }

/* ==================================================
    PC/SP 表示切り替え
================================================== */
.sp_only { display:inherit }
.pc_only { display:none }

/* ==================================================
    OTHERS
================================================== */
.clearfix::before,
.clearfix::after { display: table; content: ''; }
.clearfix::after { clear: both; }

/* ==================================================
    COMMON
================================================== */
.common_w {
    width:90%;
    margin: 0 auto;
}

/* ==================================================
   header
================================================== */
header {
    width: 100%;
	padding-top: 0;
	padding-bottom: 1.5%;
    background-color: #F6F6F6;
}
.top {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
}
.top .title_top {
    padding: 2.5em 0 2em;
    width: 85%;
    max-width: 450px;
    margin: 0 auto;
}
.top .sub-title {
    font-size: 1em;
    line-height: 2.2;
    width: 85%;
    margin:0 auto 1.5em;
    padding-bottom: 0.5em;
}
.top .sub-title span {
    display:block;
    font-optical-sizing: auto;
    font-weight:400;
    font-style: normal;
    color:#024d92;
}

/* ==================================================
   section - staff-credit
================================================== */
.interview {
    width: 100%;
    background-color:#DFDFDF;
}
/*tab button*/
.buttonz {
    display: flex;
    justify-content: center;
    width:100%;
    margin: 0 auto;
    background-color:#F6F6F6;
    padding: 0em 0 5em;
}
.buttonz .tab-btn {
    width:8em;
    margin:0 0.75em;
    text-align: center;
    font-weight: 600;
    cursor: pointer;
    border-radius: 0.15em;
    color: #024d92;
    background-color:#fff;
    border: 2px solid #024d92;
    transition: .2s ease-in-out;
}
.buttonz .tab-btn.show,
.buttonz .tab-btn:hover {
    color:#fff;
    background-color: #024d92;
}
.buttonz .tab-btn.show:hover {
    cursor: default;
} 
/*tab content*/
.tab-contents,
.tab-title {
    display: none
}
.tab-title.show,
.tab-contents.show {
    display: block
}
/*text*/
.text {
    margin-bottom:2em;
}
.text .context {
    padding-top:3.5em;
    padding-bottom: 1em;
}
.text .context .title {
    font-size: 1.45em;
    margin-bottom: 1.15em;
    font-family: "Shippori Mincho", serif;
    font-weight: 700;
    font-style: normal;
    line-height: 1.8;
    color: #024d92;
}
.text .context .title-line {
}
.text .context .question {
	color: #666;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 300;
	margin-bottom: 1.15em;
}
.text .context .question:before {
	content: " ";
	display:inline-block;
	width: 2em;
	margin-right:0.5em; 
	height:0.3em; 
	border-top:1px solid #888; 
}
.text .context .answer {
	margin-bottom: 1.15em;
}
.text .context .answer.tok {}
.text .context .answer.ota {
    color:#024d92
}
.text .context .right {
    margin: 2.5em auto 1.5em;
}
.text .context .left {
    margin: 0 auto 1.55em;
}
.text .context .right_02 ,
.text .context .left_02,
.text .context .left_03,
.text .context .all {
    margin: 1.6em auto 1.55em;
}
/*interviewees-credit*/
.interviewees-credit {
    background-color: rgba(255,255,255,1.00);
    padding-top: 3.5em;
    padding-bottom: 1.5em;
}
.interviewees-credit .portrait {
    width: 55%;
    min-width: 180px;
    margin:0 auto 1.5em;
}
.interviewees-credit .text {
    color: #333;
    font-weight: 300;
}
.interviewees-credit .text h4 {
    font-weight: 400;
    color: #000;
}
/* ==================================================
   footer - store_address
================================================== */
/*staff-credit*/
footer {
    color: #fff;
    text-align: center;
    background-color:#01315d;
}
footer .staff-credit {
    margin: 4em auto 4.25em;
}
footer .staff-credit .credit {
    font-size: 0.75em;
    padding: 4em 0;
    line-height:2.4em;
}
footer .staff-credit .logo {
	width: 65%;
	margin: 0 auto;
}
footer h6.copyright {
    font-size: 0.75em;
    font-weight:normal;
    line-height: 1em;
    padding-bottom: 3.5em;
}
footer h6.copyright span {
	font-size:1.125em;
	}

/* ==================================================
    SCROLL UP
================================================== */
.scroll-up {
    position: fixed;
    z-index:100;
	right: 1.25em; 
	top:  1.25em;
    opacity: 0;
    transition: all 0.4s ease-in-out 0s;
    }
.scroll-up a {
    width:25px;
	padding: 12px 10px 14px;
	line-height: 1;
	display: inline-block;
	color:#fff;
	background-color:rgba(0,0,0,0.2);
	-webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    border-radius: 1px;
    }
.scroll-up a:hover{
	background-color:rgba(0,0,0,0.5);
 }

/*item
---------------------------------------------*/
.item .item-wrap {
    width: 85%;
    margin: 0 auto;
}
.item {
    padding-top: 5em;
	margin-bottom:5em
	}
.item > img {
    margin-bottom:5em;
}
.item .item-wrap > li {
	margin-bottom:4em
}
.item h3 {
	font-size:1em;
	line-height:140%;
	margin-bottom:1.25em;
    font-family: "Noto Sans JP", sans-serif;
}
.item h3 a { color: #fff}	
.item h3 a:link {color:#fff;}
.item h3 a:hover { color: #aaa;}
.item h3 a:active { color: #fff;}
.item h3 a:focus { color: #fff;}
.item .thumbs {
	margin-top:1.25em;
    display:flex;
    justify-content: center;
	}
.item .thumbs li {
	width:14.75%;
    margin-right: 2.48%;
	cursor:pointer;
	transition: .3s ease-in-out;
	opacity:1.0;
	}
.item .thumbs li:last-child {
    margin-right: 0
}
.item .thumbs li:hover,		
.item .thumbs li.active {
	opacity:0.5;
	}




@media screen and (min-width:768px){
    body {
        font-size: 102%;
    }
    .sp_only { display:none }
    .pc_only { display:block }
    .common_w {
        width:92%;
        max-width: 1080px;
    }
    /*--header--*/
    .top {
        max-width: 1080px;
        padding-top: 4em;
    }
    .top .title_top {
        padding: 4em 0 3em;
        width: 45%;
    }
    .top .sub-title {
        text-align: center;
        font-size: 1.1em;
        line-height: 2.2;
        max-width: 800px;
    }
    .top .sub-title span {
        margin-top: .5em
    }
    /*--main--*/
    .text {
        margin-bottom:4em;
    }
    .text .context {
        padding-top:4em;
        padding-bottom: 2.5em;
    }
    .text .context .title {
        font-size: 1.5em;
        border-bottom: 1px solid rgba(2,77,146,0.2);
        margin-bottom: 1.5em;
        padding-bottom: 1em;
        letter-spacing: 0.05em;
        line-height: 1.8;
    }
    /*--image--*/
    .text .context .left {
        float:left;
        width:45%;
        margin: 0.5em 2em 1em auto;
    }
    .text .context .right {
        float: right;
        width:45%;
        margin: 1em auto 1em 2em;
    }
    .text .context .left_02 {
        float: left;
        width:45%;
        margin: 0.5em 2em 1em auto;
    }
    .text .context .right_02 {
        float: right;
        width:40%;
        margin: 0.5em auto 1em 2em;
    }
    .text .context .left_03 {
        float: left;
        width:40%;
        margin: 0.5em 2em 1em auto;
    }
    .text .context .all {
        margin: 7em auto 1em;
    }
   
    /*interviewees-credit*/
    .interviewees-credit {
        padding-top: 5em;
        padding-bottom: 6em;
    }
    .interviewees-credit .text {
        margin-bottom: 0;
    }
    .interviewees-credit .credit-ota {
        display: flex;
        justify-content:space-between;
        margin-bottom: 2em;
    }
    .interviewees-credit .credit-ota .portrait {
        order: 2;
        width: 25%;
        min-width:inherit;
        margin:1em 0 0 1em;
    }
    .interviewees-credit .credit-ota .text {
        order: 1;
        width: 72%;
    }
    .interviewees-credit .credit-tok {
        display: flex;
        justify-content:space-between;
        margin-bottom: 2em;
    }
    .interviewees-credit .credit-tok .portrait {
        order: 2;
        width: 25%;
        min-width:inherit;
        margin:1em 0 0 1em;
    }
    .interviewees-credit .credit-tok .text {
        order: 1;
        width: 72%;
    }
    .interviewees-credit .text {
        font-size: 15px;
    }
    .interviewees-credit .text h4 {
        font-size: 16px;
    }
    
    .item .item-wrap {
        width:92%;
        max-width: 1080px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        margin: 0 auto;
    }
    .item .item-wrap > li {
        width: 48%;
        margin-bottom: 5em;
    }
    

/* profile-------------------------------------*/
.profile {
	}
.profile > div {
    border: 1px solid #333;
    padding: 2.5em;
}
.profile h5 {
    font-size: 1.25em;
    margin-bottom: 0.5em;
	}	
.profile img {
	width:100%;
    max-width: 450px;
    margin-bottom: 1em;
	}	
.profile .tex {
    max-width: 550px;
    font-size: 0.85em;
	line-height:2;
    margin-bottom:0 auto;
	}
.profile .tex p {
    margin-bottom: 0.75em;
}
.profile .tex p.eng {
    margin-bottom: 0;
} 

    
    /*--footer--*/
	footer .staff-credit .logo {
        width:40%;
        max-width: 300px;
        margin: 2em auto 3.5em;
    }
}