@charset "UTF-8";

#contents.interviewP { margin-top: 0; padding-top:60px; }

/*メインイメージ*/
#kvWrap {
background-color: #000;
margin-bottom: 4em;
position: relative;
}
#kvWrap::after {
color:#fff;
content:'image';
font-size:1rem;
position: absolute;
right:1em;
bottom:.5em;
}
#kvWrap figure img {
width: 100%;
}
#kvWrap p {
color:#fff;
font-family: 'Montserrat', sans-serif;
font-size:2.6rem;
letter-spacing: .2em;
text-align: center;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
z-index: 2;

}



.container {
margin:auto;
max-width: 1200px;
width:92%;
}

.interviewP h2 {
font-size:1.65rem;
margin-bottom: 2em;
}


.visible_xs,
.visible_sp {display: block;}
.visible_tbpc {display: none;}

#titleWrap {
margin-bottom: 4em;
text-align: center;
}

#titleWrap h2 > em {
color:#1bb0b9;
display: block;
font-size:140%;
font-style: normal;
margin-top:.5em;
}
#titleWrap p {font-size:125%;}

img {
border: none;
border-style: none;
height: auto;
max-width: 100%;
width: auto;
}

img.image_full {
display: block;
width: 100%;
margin: auto;
}

#tablist {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
margin: 0 auto 6em;
max-width: 960px;
width: 92%;
}
#tablist li {
border: 4px solid  #1bb0b9;
margin: 0 2%;
text-align: center;
width: 100%;
}
#tablist li a {
background-color:#1bb0b9;
display: block;
color: #fff;
font-size: 1.6rem;
padding: .1em;
transition: .5s;
position: relative;
}
#tablist li:nth-child(2) {
border: 4px solid  #036eb8;
margin-top: 1em;
}
#tablist li:nth-child(2) a {background-color:#036eb8}

#tablist li a p {
border:1px solid #fff;
padding: .4em;
}
#tablist li a span {
display: block;
font-size: 1.2rem;
}
#tablist li a:hover {
background-color: #eee;
color: #000;
}
#tablist li a::after { content: ''; position: absolute; width: 8px; height: 8px; border-top: 4px solid; border-right: 4px solid; top: 50%; transform: rotate(135deg); right: 8%; border-color:  #fff; z-index: 1; transition: .5s; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg);
}
#tablist li a:hover::after {border-color:  #000;}

/*------------------------------
Over 560px
------------------------------*/
@media screen and (min-width: 560px) {
.visible_xs {display: none;}
}

/*------------------------------
Over 768px
------------------------------*/
@media screen and (min-width: 768px) {
#contents.interviewP { padding-top: 100px; }


#kvWrap p {font-size:3rem;}

#tablist li {margin:0;width: 46%;}
#tablist li:nth-child(2) {margin-top: 0;}
#tablist li a {
  font-size: 2rem;
  padding: .1em;
}
#tablist li a p {
  padding: .8em;
  }
#tablist li a > span {  font-size: 1.6rem;  }

.interviewP h2 {font-size:2.25rem;}

.visible_sp {display: none;}
.visible_tbpc {display: block;}
}

/*------------------------------
Over 980px
------------------------------*/
@media screen and (min-width: 980px) {

.interviewP h2 {font-size:2.8rem;}
}

/*------------------------------
Over 1481px
------------------------------*/
@media screen and (min-width: 1481px) {
#contents.interviewP { padding-top: 60px; }
}


/*===============================================
01.INTERVIEW
===============================================*/
#interviewWrap {margin-bottom: 3em;}

.interview_intro {border-bottom: 4px solid #1bb0b9;}
.interview_intro ul {
display: flex;
align-items: stretch;
justify-content: space-between;
flex-wrap: wrap;
margin:0 auto;
max-width: 1200px;
width: 92%;
}
.interview_intro li {
padding: 1em 0;
width:50%;
}
.interview_intro li:nth-child(1) {
background: rgb(240,228,231);
background: linear-gradient(0deg, rgba(240,228,231,1) 0%, rgba(255,255,255,1) 100%);
}
.interview_intro li:nth-child(2) {
background: rgb(219,233,234);
background: linear-gradient(0deg, rgba(219,233,234,1) 0%, rgba(255,255,255,1) 100%);
}
.interview_intro li:nth-child(3) {
background: rgb(248,228,212);
background: linear-gradient(0deg, rgba(248,228,212,1) 0%, rgba(255,255,255,1) 100%);
}
.interview_intro li:nth-child(4) {
background: rgb(232,234,246);
background: linear-gradient(0deg, rgba(232,234,246,1) 0%, rgba(255,255,255,1) 100%);
}


.interview_intro figure {width:100%;}
.interview_intro figure img {
display: block;
margin:0 auto 8px;
max-width: 106px;
width: auto;
}
.interview_intro figcaption {padding:1em;}
.interview_intro dt {font-weight:bold;}
.interview_intro dd {font-size:93%;}

#interviewWrap .name_h {color:#f68205;}
#interviewWrap .name_m {color:#37b6be;}
#interviewWrap .name_o {color:#f36;}
#interviewWrap .name_t {color:#4274f1;}

.interview_body {
background-size: auto auto;
background-color: rgba(255, 255, 255, 1);
background-image: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(237, 248, 249, 1) 2px, rgba(237, 248, 249, 1) 6px );
padding:1em 0 3em;
}
.interview_body .container {
background-color: #fff;
box-shadow: 0px 0px 5px 1px #666;
margin-top: 4em;
}
.interview_outer {padding:1em;}
.interview_inner {
margin-bottom:1em;
max-width: 1200px;
width: 100%;
}

.interview_inner h3 {
background: linear-gradient(transparent 60%, #ff0 0%);
color:#1bb0b9;
display: inline;
font-size:2rem;
letter-spacing: -.02em;
margin-bottom: 1.5em;
padding: 0 2px 4px;
text-align: left;
}
.interview_inner figure {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-top: 1em;
}
.interview_inner figure p {padding:0 .25em;}

.interview_inner h3 + ul,
.interview_inner h3 + figure {margin-top: 2em;}

.interview_inner .summary {margin-top:2em;}
.interview_inner .summary li {
border-bottom: 2px dotted #dfdfdf;
display: flex;
flex-wrap: wrap;
margin-bottom: 1em;
padding-bottom: 1em;
align-items: flex-start;
}
.interview_inner li .face_box {
margin-right: 24px;
width: 88px;
}
.interview_inner li .face_box p {

margin-top: 4px;
text-align: center;
}
.interview_inner li .comment_box {
font-size:120%;
width: calc(100% - 112px);
}

.image_wrap {display: none;}

.interview_location.section1 {margin-top: 2em}
.interview_location figure {position: relative;}
.interview_location figcaption {
font-size: 1.1rem;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
position: absolute;
bottom: .4em;
right: .4em;
}
.interview_location figure img {
max-width:100%;
width: 100%;
}

.sp_image_wrap {
display: block;
margin: 1em auto 0;
width: 100%;
}
.sp_image_wrap figure {
display: block;
position: relative;}
.sp_image_wrap figcaption {
font-size: 1.1rem;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
position: absolute;
bottom: .4em;
right: .4em;
}


/*------------------------------
Over 768px
------------------------------*/
@media screen and (min-width: 768px) {
#interviewWrap {margin-bottom: 5em;}

.interview_intro li {width:25%;}
.interview_body {padding:1em 0 5em;}
.interview_outer {padding:3em 3em .5em;}
.interview_inner {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
width: 100%
}
.interview_inner h3 {  font-size:2.1rem;  }
.interview_inner .summary {marign-top:0;width:56%;}
.interview_inner .image_wrap {
display: block;
margin-top: 3em;
width:42%;
}
.reflect_wrap {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
width: 100%
}
.reflect_wrap .summary {order: 2}
.reflect_wrap .image_wrap {margin-top: 0;order: 1}

.summary li.oversize {width: 178%;}
.summary li.reoversize {
margin-left: -78%;
width: 178%;
}

.interview_location {
display: flex;
flex-wrap: wrap;
margin:0 .25em;
}
.interview_location li {width:100%;position: relative;z-index: 2;}
.interview_location.section1 li:nth-child(1) {
width: 58%;
margin-left: auto;
}
.interview_location.section1 li:nth-child(2) {
margin: -5em 0 1em;
width: 58%;
}
.interview_location.section1 li:nth-child(3) {
margin: -5em 0 1em auto;
width: 58%;
z-index: 1;
}

.sp_image_wrap {display: none;}


}
/*------------------------------
Over 980px
------------------------------*/
@media screen and (min-width: 980px) {
.interview_intro li {padding-bottom: 0;}
.interview_intro figure {
display: flex;
align-items: center;
}
.interview_intro figure img {margin-bottom: -1px;}
.interview_intro figcaption {padding:1em .5em;}


.interview_inner h3 {  font-size:2.8rem;  }
}


@media screen and (min-width: 768px) and (max-width: 1140px) {
.summary li.reoversize2 {
margin-left: -78%;
width: 178%;
}
}
@media screen and (min-width: 768px) and (max-width: 845px) {
.summary li.reoversize3 {
margin-left: -78%;
width: 178%;
}
}

@media screen and (min-width: 768px) and (max-width: 1067px) {
.summary li.oversize2 {width: 178%;}
}
@media screen and (min-width: 768px) and (max-width: 890px) {
.summary li.oversize3 {width: 178%;}
}

/*===============================================
02.SCHEDULE
===============================================*/
#scheduleWrap {margin-bottom: 6em;}
#scheduleWrap .title__wrap {
margin-bottom: 3em;
text-align: center;
}

#scheduleWrap .title__wrap p {
font-size:125%;
text-align: center;
}


#scheduleWrap h3 {
background-color: #036eb8;
color:#fff;
font-size:120%;
margin:0 auto 2em;
width:12em;
position: relative;
}
#scheduleWrap h3 span {line-height: 32px;}
#scheduleWrap h3 em {
font-size:75%;
font-style: normal;
}
#scheduleWrap h3::before,
#scheduleWrap h3::after {
background:url(../img/bg_corner_weekday.png) no-repeat;
background-size:contain;
content:'';
display: block;
height:32px;
width: 12px;
position: absolute;
top:0;
}
#scheduleWrap h3::after {
transform: rotate(180deg);
right:0;
}

#scheduleWrap h3.holiday {background-color: #e83828;}
#scheduleWrap h3.holiday::before,
#scheduleWrap h3.holiday::after {
background:url(../img/bg_corner_holiday.png) no-repeat;
background-size:contain;
}

#timelineWrap {
background:url(../img/bg_timeline.gif) repeat-y 0 0;
margin:0 auto 5em;
max-width: 1200px;
width: 92%;
}
.timeline_inner {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 4em;
}
.timeline_inner:last-child {background-color: #fff;}
.timeline_inner .time {
background-color: #fff;
border:1px solid #036eb8;
color:#036eb8;
font-size:112.5%;
font-weight: 700!important;
text-align: center;
width:80px;
}
.timeline_inner .summary {width: calc(100% - 96px);}
.timeline_inner dt {
font-size:112.5%;
font-weight: 700!important;
line-height: 30px;
margin-bottom: .5em;
padding-left: 32px;
}
.timeline_inner dt.dad {
background:url(../img/ic_daddy.png) no-repeat;
background-size:24px 30px;
color:#036eb8;
}
.timeline_inner dt.mom {
background:url(../img/ic_mom.png) no-repeat;
background-size:24px 30px;
color:#ea616f;
}
.timeline_inner dd {
color:#036eb8;
font-size:112.5%;
}
.timeline_inner dd.dd_lead {
color:#000;
margin-top:8px;
}
.timeline_inner .extend_wrap {
background-color: #eee;
font-size:93%;
margin:1em 0 0 96px;
padding:1em;
width: 100%;
}

#holidayWrap {
border:4px solid #ddd;
border-radius: 10px;
margin:auto;
max-width: 1024px;
width:92%;
}
#holidayWrap h3 {margin:1em auto;}
#holidayWrap .holiday_inner {padding:1em;}
#holidayWrap .holiday_inner .summary {margin-bottom:1em;}

#holidayWrap .holiday_inner h4 {
background: linear-gradient(transparent 60%, #ff0 0%);
color:#e83828;
display: inline;
font-size:1.6rem;
font-weight: bold;
margin-bottom: 1em;
text-align: left;
}

#holidayWrap .holiday_dircol {margin-top:2em;}

#holidayWrap .image_holiday_fin {
margin: 0 auto 2em;
max-width: 960px;
width: 90%;
}

.timeline_inner .summary_inner dl {margin-bottom: 2em;}
.timeline_inner figure {margin-left: -96px;}

.links_location {
margin: 3em auto 2em;
max-width: 880px;
width: 92%;
}

/*------------------------------
Over 768px
------------------------------*/
@media screen and (min-width: 768px) {
#scheduleWrap .title__wrap {padding-bottom: 2em;}
#scheduleWrap .title__wrap,
#scheduleWrap .title__wrap h2 {text-align: left;}



#scheduleWrap h3 span {line-height: 64px;}

#scheduleWrap h3::before,
#scheduleWrap h3::after {
height:64px;
width: 24px;
}


#holidayWrap .holiday_inner {
padding:1em 2em 2em;
}

#holidayWrap .holiday_inner h4 {font-size:2rem;}


#holidayWrap .holiday_dircol {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
#holidayWrap .holiday_dircol .summary {width: 52%;}
#holidayWrap .holiday_dircol figure {width: 39%;}
}

/*------------------------------
Over 980px
------------------------------*/
@media screen and (min-width: 980px) {
#holidayWrap .holiday_inner h4 {font-size:2.4rem;}
}


/*===============================================
03.LEISURE
===============================================*/
#leisureWrap {
background-size: auto auto;
background-color: rgba(255, 255, 255, 1);
background-image: repeating-linear-gradient(135deg, transparent, transparent 2px, rgba(224, 236, 226, 1) 2px, rgba(224, 236, 226, 1) 6px );
margin-bottom: 4em;
padding:4em 0;
}

#leisureWrap .title__wrap h2 > em {
color:#22ac38;
display: block;
font-size:140%;
font-style: normal;
margin-top:.5em;
}

#leisureWrap .container {
background-color: #fff;
box-shadow: 0px 0px 5px 1px #666;
}
.leisure_outer {padding:1em;}


.leisure_inner + .leisure_inner {margin-top:2em;}
.leisure_inner h3 {
color:#22ac38;
font-size:112.5%;
margin: 1em 0;
text-align: left;
}
.leisure_inner figure {
margin:auto;
max-width: 620px;
width: 100%;
}
.leisure_inner figure.full {
margin:auto;
max-width: auto;
width: 100%;
}
.leisure_inner .extend_wrap {
background-color: #eee;
font-size:93%;
margin-top: .5em;
padding:1em;
}

/*------------------------------
Over 768px
------------------------------*/
@media screen and (min-width: 768px) {
.leisure_outer {padding:3em 3em .5em;}
}

/*------------------------------
Over 980px
------------------------------*/
@media screen and (min-width: 980px) {
.leisure_outer {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
justify-content: space-between;
}
.leisure_inner {
margin-bottom:3em;
width:34.16%;
}
.leisure_inner.type_full {width:100%;}
.leisure_inner.type_wide {width:63.33%;}
.leisure_inner figure {
max-width:100%;
width: 100%;
}
.leisure_inner + .leisure_inner {margin-top:0;}
}

/*------------------------------
Over 1280px
------------------------------*/
@media screen and (min-width: 1280px) {}