@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;600&family=Roboto:wght@100;300;400;700&family=Taviraj:ital,wght@1,100;1,200;1,300&display=swap');

/* CSS Document */
/* ==================================================
    BASE (RESET)FONT
================================================== */
html { font-size: 90%;}
body {
    font-family: 'Noto Sans JP', sans-serif;
    background-color:#181F33;
    font-weight: 300;
	font-size: 14px;
	font-feature-settings: "palt" 1;
	text-align: center;
	letter-spacing: 0.01em;
	-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:1.8;
}
.font {
    font-family:Helvetica, "sans-serif";
    font-weight: normal;
}
img {
    display: block;
    width: 100%;
}

/* ==================================================
    LINK
================================================== */
a { line-height: 1.2; text-decoration:none; }
a:link { color: #181F33; transition: .2s ease-in-out; }
a:visited { color: #181F33; }
a:hover { color:rgba(24,31,51,0.5);}
a:active { color: #181F33; }
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:88%;
    margin: 0 auto;
}

/* ==================================================
   header
================================================== */
header {
    background-color: #F6F6F6;
    width: 100%;
}
header .top {
	width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
}
header .header_img {
	width: 90%;
	max-width: 1080px;
	margin: 0 auto 2em;
}
header .header_logo {
	width: 60%;
	max-width: 450px;
	margin: 0 auto;
}

/* ==================================================
   section - gallery
================================================== */
.gallery {
    width: 100%;
}
.gallery ul {
    padding-top:5em;
}
.gallery li {
    margin:0 auto 4.75em;
}
.gallery li img {
    width: calc(70% - 6px);
    margin:1em auto 1.5em;
    border: 3px #FFF solid;
}
.gallery li#img03 img,
.gallery li#img05 img,
.gallery li#img07 img {
    width: calc(90% - 6px);
}

.gallery .credit_photo {
    font-family: Helvetica, "sans-serif";
    margin: 1.5em 0 2em;
    font-size: 0.85em;
    color: #f6f6f6; 
    line-height: 2;
}
.gallery .credit_photo a { line-height: 1.2; text-decoration:underline; }
.gallery .credit_photo a:link { color: #f6f6f6; transition: .2s ease-in-out; }
.gallery .credit_photo a:visited { color: #f6f6f6; }
.gallery .credit_photo a:hover { color:#7F7F7F; text-decoration:underline;}
.gallery .credit_photo a:active { color: #f6f6f6; }

/* ==================================================
   section - interview
================================================== */
.interview {
    padding-top:3.25em;
    background-color:#DFDFDF;
    font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}
.interview .text {
    width: 90%;
    margin: 0 auto;
}
.interview .text h1 {
    font-size:18px;
    margin-bottom:0.75em;
    color:#181F33;
}
.interview .sub-title {
    font-size:14px;
    max-width: 750px;
    margin:0 auto 3.25em;
    line-height: 2.2;
    text-align: left;
}
.interview .context {
    text-align: left;
}
.interview .context li {
    font-size:14px;
    line-height: 2;
}
.interview .context li.title {
	margin-bottom: 1em;
    font-size:16px;
    font-weight: bold;
    text-align: center;
    color:#181F33;
}
.interview .context li.question {
	margin-bottom: 1em;
    font-family: 'Noto Sans JP', sans-serif;
    color: #666;
}
.interview .context li.question:before {
	content: " ";
	display:inline-block;
	width: 2em;
	margin-right:0.5em; 
	height:0.3em; 
	border-top:1px solid #888; 
}
.interview .context li.answer{
    margin-bottom: 2.25em;
}
.interview .context .left,
.interview .context .right,
.interview .context .center {
        width:100%;
        margin: 0 auto 1.25em;
    }
.interview .otakara_logo {
	width: 50%;
    max-width: 300px;
    padding-top: 1em;
    padding-bottom:1.5em;
	margin: 0 auto;
}

/* ==================================================
   section - credit
================================================== */
.credit {
    background-color:#DFDFDF;
    font-family: 'Noto Sans JP', sans-serif;
}
.credit .staff_credit {
	line-height: 2.2;
    font-size: 12px;
    font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
    margin-bottom: 2.75em
}
.credit .introduction .portrait {
    margin-bottom: 1em;
}
.credit .introduction .text {
    width: 90%;
    margin: 0 auto;
    padding-bottom:3em;
    text-align: left;
    line-height: 2;
    font-size: 14px;
}
.credit .introduction .text h4 {
    font-size: 15px;
    text-align: center;
    margin-bottom: 0.5em;
    font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}
.credit .introduction .introduction_text span {
    display: inline-block;
    margin-bottom: 2em;
    font-weight: 300;
}
.credit .introduction .event_info {
    border: 1px solid #ccc;
    padding:1.25em 1.75em 0.75em;
    margin: 0 auto;
    text-align: center;
}	
.credit .introduction .event_info div.font {
    margin-bottom: .95em;
    line-height: 1.7;
}
.credit .introduction .event_info span {
    font-weight: bold;
    display: block;
}

/* ==================================================
   footer - store_address
================================================== */
footer h6.copyright {
    text-align: center;
    font-size: 12px;
    font-weight:normal;
    line-height: 1;
    padding-bottom: 3em;
    padding-top: 2em;
    color: #FFF;
    font-family: 'Noto Sans JP', sans-serif;
}
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:30px;
	padding: 8px;
	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;     
    }
.scroll-up a:hover{
	background-color:rgba(0,0,0,0.5);
    }


@media screen and (min-width:768px){
    .sp_only { display:none }
    .pc_only { display:block }
    header .top {
        max-width: 1024px;
        height: auto;
        justify-content: space-between;
        margin: 0 auto;
        padding: 3em 0;
        width: 92%;
    }
    header .header_img {
        order: 2;
        width: 63%;
        max-width: none;
        margin: 0;
    }
    header .header_logo {
        order: 1;
        width: 30%;
        max-width: none;
        margin: 0;
    }
    .gallery ul {
        width: 92%;
        max-width: 1024px;
        margin: 0 auto;
        padding-top:5em;
    }
    .gallery li {
        margin:0 auto 9em;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .gallery li#img04,
    .gallery li#img06 {
        align-items: flex-end;
    }
    .gallery li#img04>div:nth-child(1),
    .gallery li#img06>div:nth-child(2){
         margin-bottom: 10em;
    } 
    .gallery li img {
        width: calc(100% - 6px);
        margin:0 auto;
    }
    .gallery li#img03 img,
    .gallery li#img05 img,
    .gallery li#img07 img {
         max-width: 1024px;
        width: calc(100% - 6px);
    }
    .gallery li .image-50 {
        width: 55%
    }
    .gallery li .image-40 {
        width: 42%;
    }
    .gallery li .image-100 {
        width: 100%;
    }
    
    .interview {
        padding-top:4em;
    }
    .interview .text {
        width: 92%;
        max-width: 1024px;
    }
    .interview .text h1 {
        font-size:22px;
        line-height: 2;
        margin-bottom:1.25em;
    }
    .interview .sub-title {
        font-size:16px;
        margin-bottom:4em;
        line-height: 2.75;
    }
    .interview .context li {
        font-size:15px;
        line-height: 2.2;
    }
    .interview .context li.title {
        margin-bottom: 1.5em;
        font-size:18px;
        text-align: left;
        border-bottom: 1px solid rgba(24,31,51,0.5);
        float:left;
        width: calc(60% - 3em);
        padding-bottom: .75em;
        line-height: 1.5;
    }
    .text .context .left img {
        float: left;
        width:40%;
        margin: 0 3em 1em 0;
        padding-top: 1.15em;
        padding-bottom: 1.5em;
        background-color: #f6f6f6;
    }
    .text .context .right img {
        float: right;
        width:40%;
        margin: 1em 0 1em 3em;
        padding-top: 1.5em;
        padding-bottom: 2.5em;
        background-color: #f6f6f6;
    }
    .text .context .center {
        float: left;
        width:40%;
        margin: 0.5em 3em 1em 0;
        padding-top: 1.15em;
        padding-bottom: 1.5em;
        background-color: #f6f6f6;
    }
    .interview .otakara_logo {
        padding-top: 3em;
        padding-bottom: 1.5em;
    }
    .credit .staff_credit {
        padding-bottom: 3em
    }
    .credit .introduction {
        max-width: 1024px;
        width: 92%;
        margin: 0 auto;
        padding-bottom:5em;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        clear: both;
    }
    .credit .introduction .portrait {
        width: 330px;
        margin-bottom:0;
    }
    .credit .introduction .text {
        width: calc(100% - 400px);
        padding-bottom:0;
        line-height: 2;
        font-size: 13px;
    }
    .credit .introduction .text h4 {
        font-size: 14px;
        text-align: left;
    }
    .credit .introduction .introduction_text span {
        margin: 0 auto 1.5em;
    }
    .credit .introduction .event_info .flex {
        display: flex;
        justify-content:flex-start;
    }
    .credit .introduction .event_info .font {
        text-align: left;
        width: 19em;
    }
    .credit .introduction .event_info .font:first-child {
        width: 15em;
    }
}