/* modern-css-reset by Andy Bell */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  cursor: pointer;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

html, body {
width: 100%;
height: 100%;
}
body{
font-size:18px;
-webkit-text-size-adjust: 100%;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
text-align:center;
color:#fff;
background:#294b58;
}
img {
vertical-align:bottom;
}
a{
text-decoration:none;
color:#666;
line-height:1.5;
opacity:1;
}
a,a:hover {
-webkit-transition:0.7s;
-moz-transition:0.7s;
-o-transition:0.7s;
transition:0.7s;
}
a img:hover {
-moz-opacity:0.75;
opacity:0.75;
}
a:hover{
opacity:0.5;
}
p,li,div,dt,dd,td,th{
box-sizing:border-box;
}
p {
text-align:justify;
line-height:1.8;
padding: 2rem 0;
}
.br_2{
display:none;
}

/*====================================================
LAYOUT
====================================================*/

#wrapper {
}

#header_pc {
display: block;
width: 100%;
margin: 0 auto;
}
#header_pc img{
width: 100%;
}

#header_sp {
display: none;
}
#header_sp img{
width: 100%;
}

section {
}
.flex {
display:flex;
justify-content:space-between;
flex-direction: row;
flex-wrap: wrap;
align-items:center;
}
.reverse {
flex-direction: row-reverse;
}
.txt {
width:50%;
}
.flex img {
width:50%;
}
.inner {
padding:0 25%;
}
h1 {
text-align:left;
font-size: 180%;
font-weight:normal;
font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
padding-bottom: 0.5rem;
border-bottom:1px solid #fff;
}
.img100{
width:100%;
}

#sect4 {
padding:8rem 0;
}

#sect4 h1{
text-align:center;
width:420px;
margin:0 auto;
}

#sect4 .item {
background:#fff;
width:320px;
font-family: "メイリオ", meiryo, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro","ヒラギノ角ゴシック", Hiragino Sans,"ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans‒serif;
border:1px solid #cccccc;
padding:2rem;
margin:2rem auto 0;
}
#sect4 .item img{
width:100%;
}
h4 {
color:#000;
font-size: 120%;
font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
line-height:1.2;
padding: 0.5rem 0;
}
#sect4 .item dl{
color:#000;
}
#sect4 .item dl dt{
font-weight:bold;
}
#sect4 .item dl dd{
font-size: 90%;
color:#666;
}

.small {
font-size:80%;
}

h4 {
text-align:center;
color:#000;
font-size:20px;
}
h4 span{
color:#000;
font-size:16px;
}
.w420 {
width:420px;
margin:auto;
}
.w420 img{
width:100%;
}

#footer {
margin: 0 auto;
text-align: center;
padding:4rem 0;
}
#footer dl dt{
font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
margin-bottom: 0.5rem;
}
#footer dl dt img {
width:260px;
display:inline-block;
margin:0 auto;
}
#footer dl dd{
font-size:14px;
font-family:"メイリオ", Meiryo,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS ゴシック","MS Gothic",sans-serif;
}
.ctr {
text-align:center;
}


/*====================================================
AFTER
====================================================*/

section:after,
#sect1:after,
#sect2:after,
#sect3:after,
#sect4:after,
#footer:after {content:".";display:block;clear:both;height:0;visibility:hidden;font-size:0;}

/*====================================================
MEDIA QUERY
====================================================*/

@media screen and (max-width:1280px) {
section {
}
section .inner {
padding:0 5%;
}
h1 {
font-size: 160%;
letter-spacing:-1px;
}
#sect4 {
padding-top:4rem;
}
}

@media screen and (max-width:750px) {
body{
font-size:15px;
}
img {
width: 100%;
height: auto;
}
#wrapper {
}
#header_sp {
display: block;
width: 100%;
}
#header_pc {
display: none;
}
section {
padding:0;
}
section .flex {
display: block;
}
.txt {
width:100%;
padding:10% 5%;
}
.flex img {
width:100%;
}
.inner {
}
p {
width:100%;
text-align:justify;
padding: 1rem 0;
margin:0 auto;
}
.interview {
width:90%;
padding:3% 0;
}
#sect4 {
padding:3rem 0;
}
#sect4 h1{
width:90%;
}
.w420 {
width:90%;
margin:auto;
}
.br_1{
display:none;
}
.br_2{
display:block;
}
}