@charset "UTF-8";
html, body {
margin: 0 !important;
font-size: 10px;
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif; }
body {
position: relative;
padding: 0; }
body:before {
content: "";
position: fixed;
top: 0;
display: block;
width: 100%;
height: 100vh;
background-image: url("../images/bg02.png");
background-size: cover;
background-repeat: no-repeat;
background-position: 0 0;
z-index: -2; }
@media (max-width: 768px) {
body:before {
background-image: url("../images/bg02-sp.png"); } }
body:after {
content: "";
position: absolute;
top: 0;
display: block;
width: 100%;
height: 100%;
background-image: url("../images/bg01.png");
background-size: contain;
background-repeat: repeat-y;
background-position: 0 31%;
z-index: -1; }
@media (max-width: 768px) {
body:after {
background-image: url("../images/bg01-sp.png");
background-size: 181%;
background-position: 40% 0%; } }
main {
margin: -388px 0 0; }
@media (max-width: 768px) {
main {
margin: -136px 0 0; } }
.max-w {
max-width: 1760px;
margin: 0 auto;
padding: 0 80px;
box-sizing: border-box; }
@media (max-width: 768px) {
.max-w {
max-width: 100%;
padding: 0 10px; } }
a:hover {
opacity: .8; }
p, span, h1, h2, h3, h4 {
margin: 0;
color: #322B2A; }
p {
letter-spacing: .05em; }
ul {
padding: 0; }
img {
max-width: 100%;
image-rendering: -webkit-optimize-contrast; }
.en-heading > * {
display: block; }
.en-heading span {
display: flex;
align-items: center;
color: #5E7F95;
font-weight: normal; }
.en-heading img {
margin: 0 0 64px; }
.circle {
position: relative;
padding: 0 0 0 20px; }
.circle:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 3px;
width: 10px;
height: 10px;
margin: auto;
background: url("../images/circle.png") no-repeat;
background-size: cover; }
.scr {
opacity: 0;
visibility: hidden;
transform: translateY(30px);
transition: opacity 1.5s, visibility 1.5s, transform 1.5s; }
.scr.is-fadein {
opacity: 1;
visibility: visible;
transform: translateX(0); }
/*******************************
ヘッダー
*******************************/
header {
position: relative;
z-index: 20;
height: 325px;
padding: 63px 0 0;
background: linear-gradient(180deg, white, rgba(255, 255, 255, 0)); }
@media (max-width: 768px) {
header {
height: 136px;
padding: 20px 0 0;
background: linear-gradient(180deg, white, rgba(255, 255, 255, 0)); } }
header.page-header {
height: 234px;
box-sizing: border-box; }
@media (max-width: 768px) {
header.page-header {
height: 146px;
padding: 20px 20px 27px; } }
header.page-header .head-inner {
display: block;
max-width: 1440px;
margin: 0 auto; }
header.page-header .head-inner a:first-of-type {
margin: 0 0 40px; }
@media (max-width: 768px) {
header.page-header .head-inner a:first-of-type {
margin: 0 0 34px; } }
header.page-header .head-inner a:first-of-type img {
margin: 0 0 0 6px; }
@media (max-width: 768px) {
header.page-header .head-inner a:first-of-type img {
margin: 0; } }
header.page-header .head-inner a:last-of-type {
width: 508px; }
@media (max-width: 768px) {
header.page-header .head-inner a:last-of-type {
width: 210px;
margin: 0 auto; } }
header .head-inner {
display: flex; }
header .head-inner a {
display: block;
width: 271px; }
@media (max-width: 768px) {
header .head-inner a {
width: 151px; } }
/*******************************
フッター
*******************************/
footer {
margin: 200px 0 0;
padding: 63px 0 31px;
background: linear-gradient(180deg, #185a86, #092537); }
@media (max-width: 768px) {
footer {
margin: 40px 0 0;
padding: 50px 20px 15px; } }
footer .footer-inner {
position: relative;
max-width: 1760px;
margin: 0 auto;
padding: 0 28px 0; }
@media (max-width: 768px) {
footer .footer-inner {
padding: 0; } }
footer .footer-inner .footer-main {
display: flex;
align-items: center;
justify-content: space-between; }
@media (max-width: 768px) {
footer .footer-inner .footer-main {
display: block; } }
footer .footer-inner .footer-main .footer-logo {
display: block;
width: 476px; }
@media (max-width: 768px) {
footer .footer-inner .footer-main .footer-logo {
width: 240px;
margin: 0 auto 50px; } }
@media (max-width: 768px) {
footer .footer-inner .footer-main .footer-nav {
width: 100%;
margin: 0 0 50px; } }
footer .footer-inner .footer-main .footer-nav nav {
display: flex; }
@media (max-width: 768px) {
footer .footer-inner .footer-main .footer-nav nav {
display: block; } }
footer .footer-inner .footer-main .footer-nav nav .footer-col {
margin: 0 66px 0 0; }
footer .footer-inner .footer-main .footer-nav nav .footer-col:last-of-type {
margin: 0; }
@media (max-width: 768px) {
footer .footer-inner .footer-main .footer-nav nav .footer-col {
margin: 0; } }
footer .footer-inner .footer-main .footer-nav nav .footer-col dl {
margin: 0; }
@media (max-width: 768px) {
footer .footer-inner .footer-main .footer-nav nav .footer-col dl {
margin: 0 0 18px; } }
footer .footer-inner .footer-main .footer-nav nav .footer-col dl:nth-of-type(2) {
margin: 47px 0 0; }
@media (max-width: 768px) {
footer .footer-inner .footer-main .footer-nav nav .footer-col dl:nth-of-type(2) {
margin: 0 0 18px; } }
footer .footer-inner .footer-main .footer-nav nav .footer-col dl dt {
margin: 0 0 23px;
color: #fff;
font-size: 1.6rem; }
footer .footer-inner .footer-main .footer-nav nav .footer-col dl dd {
margin: 0 0 23px 20px; }
@media (max-width: 768px) {
footer .footer-inner .footer-main .footer-nav nav .footer-col dl dd {
display: inline-block;
height: 14px;
margin: 0 24px 22px 0;
padding: 0 24px 0 20px;
border-right: 1px solid #fff; }
footer .footer-inner .footer-main .footer-nav nav .footer-col dl dd:last-of-type {
border-right: none; } }
footer .footer-inner .footer-main .footer-nav nav .footer-col dl dd a {
color: #fff;
text-decoration: none;
font-size: 1.4rem;
word-break: keep-all; }
@media (max-width: 768px) {
footer .footer-inner .footer-main .footer-nav nav .footer-col dl dd a {
font-size: 1.2rem; } }
footer .footer-inner .copy {
margin: 46px 0 0; }
@media (max-width: 768px) {
footer .footer-inner .copy {
margin: 0; } }
footer .footer-inner .copy:before {
content: "";
display: block;
width: 100%;
height: 0.5px;
margin: 0 0 24px;
background: #B3D2E6; }
footer .footer-inner .copy .copy-inner {
display: flex;
justify-content: space-between; }
@media (max-width: 768px) {
footer .footer-inner .copy .copy-inner {
display: block; } }
footer .footer-inner .copy .copy-inner a {
display: block;
width: 160px; }
@media (max-width: 768px) {
footer .footer-inner .copy .copy-inner a {
margin: 0 auto 14px; } }
footer .footer-inner .copy .copy-inner a img {
width: 100%; }
footer .footer-inner .copy .copy-inner p {
font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
font-size: 1.2rem;
font-weight: bold;
color: #fff; }
@media (max-width: 768px) {
footer .footer-inner .copy .copy-inner p {
text-align: center; } }
footer .pagetop {
position: absolute;
bottom: 140px;
right: 28px;
display: block;
width: 50px;
height: 34px; }
@media (max-width: 768px) {
footer .pagetop {
position: static;
bottom: auto;
margin: 0 auto 24px; } }
.jp-en-head {
display: flex;
align-items: center; }
.jp-en-head .en-heading {
position: relative; }
.jp-en-head .en-heading:before {
content: "";
position: absolute;
bottom: calc(100% + 16px);
display: block; }
@media (max-width: 768px) {
.jp-en-head .en-heading:before {
bottom: calc(100% + 8px); } }
.jp-en-head .en-heading img {
margin: 0; }
.jp-en-head:after {
content: "";
width: calc(100% - 150px);
height: 0.5px;
background: #B3D2E6; }
@media (max-width: 768px) {
.jp-en-head:after {
width: calc(100% - 112px); } }
/*******************************
下層ページ共通
*******************************/
.breadcrumb {
max-width: 1440px;
margin: 40px auto 0; }
.breadcrumb:after {
content: "";
display: block;
width: 100%;
height: .5px;
background: #B3D2E6; }
@media (max-width: 768px) {
.breadcrumb {
margin: 0 20px 0; } }
.breadcrumb ul {
display: flex;
margin: 0 0 40px;
flex-wrap: wrap; }
@media (max-width: 768px) {
.breadcrumb ul {
margin: 0 0 14px; } }
.breadcrumb ul li {
list-style: none; }
.breadcrumb ul li a, .breadcrumb ul li span {
font-size: 1.2rem;
color: #5E7F95;
text-decoration: none; }
.breadcrumb ul li a:after {
content: "/";
display: inline-block;
margin: 0 12px; }
.page-main {
margin: 60px 0 200px; }
@media (max-width: 768px) {
.page-main {
margin: 30px 0 60px;
padding: 0 20px; } }
/*******************************
記事一覧
*******************************/
.archives {
max-width: 1440px;
margin: 0 auto; }
.archives .topics {
display: flex;
flex-wrap: wrap;
width: calc(100% + 24px);
list-style: none; }
@media (max-width: 768px) {
.archives .topics {
width: calc(100% + 8px);
margin: 0 0 32px; } }
.archives .topics li {
max-width: 342px;
margin: 0 24px 90px 0;
background: #fff;
border-radius: 8px; }
@media (max-width: 768px) {
.archives .topics li {
width: calc(50% - 8px);
margin: 0 8px 24px 0;
border-radius: 4px; } }
.archives .topics li a {
display: block;
text-decoration: none; }
.archives .topics li a .topic-img {
position: relative;
width: 100%;
height: 211px;
margin: 0 0 24px;
border-radius: 8px 8px 0 0;
overflow: hidden; }
@media (max-width: 768px) {
.archives .topics li a .topic-img {
height: auto;
margin: 0 0 8px;
border-radius: 0; } }
.archives .topics li a .topic-img img {
display: block;
margin: 0 auto;
-moz-transition: .3s ease;
-webkit-transition: .3s ease;
transition: .3s ease;
object-fit: cover; }
.archives .topics li a .interviewee {
margin: 0 25px 24px;
padding: 0 0 16px;
font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
color: #5E7F95;
font-weight: 500;
font-size: 1.4rem;
border-bottom: 1px solid #EAEAEA; }
@media (max-width: 768px) {
.archives .topics li a .interviewee {
margin: 0 10px 16px;
padding: 0 0 16px;
font-size: 1.2rem; } }
.archives .topics li a .interviewee span {
display: block;
margin: 0 0 4px;
color: #5E7F95;
font-size: 1.2rem; }
@media (max-width: 768px) {
.archives .topics li a .interviewee span {
margin: 0;
font-size: 1rem; } }
.archives .topics li a .post-title {
margin: 0 0 32px;
padding: 0 25px 0;
font-size: 2rem;
font-weight: bold; }
@media (max-width: 768px) {
.archives .topics li a .post-title {
margin: 0 0 16px;
padding: 0 10px 0;
font-size: 1.6rem; } }
.archives .topics li a:hover .topic-img img {
transform: scale(1.1); }
.archives .topics li a:hover h2 {
text-decoration: underline;
color: #5E7F95; }
.bottom-btn {
position: relative;
display: block;
height: 50px;
margin: 0 auto;
text-decoration: none;
border-radius: 40px;
box-sizing: border-box; }
.bottom-btn.read-more, .bottom-btn.return-archives {
width: 200px; }
.bottom-btn.read-more {
padding: 0 0 0 32px; }
.bottom-btn.read-more .btn-arrow:after {
right: 20px;
width: 10px;
height: 10px;
background: url("../images/arrow-white.png") no-repeat;
background-size: cover; }
.bottom-btn.return-archives {
padding: 0 0 0 16px; }
.bottom-btn.return-archives .btn-arrow:after {
right: 18px;
width: 13px;
height: 2px;
background: url("../images/dots.png") no-repeat;
background-size: cover; }
.bottom-btn span {
position: relative;
z-index: 2;
color: #fff;
font-size: 1.8rem;
line-height: 47px;
font-weight: 500;
-moz-transition: .3s ease;
-webkit-transition: .3s ease;
transition: .3s ease; }
.bottom-btn .btn-arrow {
position: absolute;
top: 0;
right: 0;
z-index: 1;
display: inline-block;
width: 100%;
height: 100%;
background: linear-gradient(90deg, #2b7cb2, #12496e);
border-radius: 40px;
-moz-transition: .3s ease;
-webkit-transition: .3s ease;
transition: .3s ease; }
.bottom-btn .btn-arrow:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
display: block;
margin: auto; }
.bottom-btn:hover span {
margin: 0 0 0 -32px;
color: #12496E; }
.bottom-btn:hover .btn-arrow {
width: 50px;
height: 50px; }
/*******************************
トップページ
*******************************/
/***** MV *****/
.mv {
height: calc(100vw * 0.66); }
@media (max-width: 768px) {
.mv {
height: 100vh; } }
.mv .mv-inner {
position: relative;
height: 100%; }
.mv .mv-inner h1 {
position: absolute;
top: 31.8%;
right: 11.5%;
width: 38.9%;
z-index: 10; }
@media (max-width: 768px) {
.mv .mv-inner h1 {
top: 47.8%;
right: auto;
left: 10px;
width: 318px; } }
@media (max-width: 375px) {
.mv .mv-inner h1 {
top: 51.8%;
width: 267px; } }
.mv .mv-inner .mv-imgs {
position: relative;
width: 100%;
height: 100%; }
.mv .mv-inner .mv-imgs.group02 {
display: none; }
.mv .mv-inner .mv-imgs picture {
position: absolute; }
.mv .mv-inner .mv-imgs picture img {
width: 100%; }
@media (max-width: 768px) {
.mv .mv-inner .mv-imgs picture img {
width: auto;
height: auto; } }
.mv .mv-inner .mv-imgs picture:first-of-type {
top: 0;
left: -80px;
width: 51.1%; }
@media (max-width: 768px) {
.mv .mv-inner .mv-imgs picture:first-of-type {
left: -10px;
/*width: auto;
height: 44%;*/
width: 64.8%; } }
.mv .mv-inner .mv-imgs picture:nth-of-type(2) {
top: 0;
right: 11.5%;
width: 17%;
max-width: 300px; }
@media (max-width: 768px) {
.mv .mv-inner .mv-imgs picture:nth-of-type(2) {
top: 19.8%;
right: -10px;
/*width: auto;
height: 25.5%;*/
width: 27.6%; } }
.mv .mv-inner .mv-imgs picture:nth-of-type(3) {
bottom: 25%;
right: 33%;
width: 17%;
max-width: 300px; }
@media (max-width: 768px) {
.mv .mv-inner .mv-imgs picture:nth-of-type(3) {
left: 10px;
right: auto;
bottom: 12.9%;
/*width: auto;
height: 24%;*/
width: 39.2%; } }
@media (max-width: 375px) {
.mv .mv-inner .mv-imgs picture:nth-of-type(3) {
bottom: 4.9%; } }
.mv .mv-inner .mv-imgs picture:last-of-type {
bottom: 10.8%;
right: 11.5%;
width: 17%;
max-width: 300px; }
@media (max-width: 768px) {
.mv .mv-inner .mv-imgs picture:last-of-type {
bottom: 2.4%;
right: 30px;
/*width: auto;
height: 24%;*/
width: 39.2%; } }
.mv .mv-inner .mv-scroll {
position: absolute;
right: 74px;
bottom: 10%;
width: 12px; }
@media (max-width: 768px) {
.mv .mv-inner .mv-scroll {
right: 0px;
bottom: 14%;
width: 9px; } }
.mv .mv-inner .mv-scroll img {
width: 100%;
margin: 0 0 25px; }
@media (max-width: 768px) {
.mv .mv-inner .mv-scroll img {
margin: 0 0 10px; } }
.mv .mv-inner .mv-scroll .scroll-line {
position: relative;
display: block;
width: 1px;
height: 145px;
margin: 0 0 0 39%;
background: #fff; }
@media (max-width: 768px) {
.mv .mv-inner .mv-scroll .scroll-line {
height: calc(100vh * 25%); } }
.mv .mv-inner .mv-scroll .scroll-line:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 53px;
margin: auto;
background: #5E7F95;
animation: moveUpDown 4s ease-in-out infinite; }
@media (max-width: 768px) {
.mv .mv-inner .mv-scroll .scroll-line:before {
height: calc(100vh * 6.25%); } }
@keyframes moveUpDown {
0%, 100% {
top: 0; }
50% {
top: 20px; } }
/***** introduction *****/
.intro {
display: flex;
align-items: start;
padding: 0; }
@media (max-width: 768px) {
.intro {
flex-wrap: wrap;
margin: 66px 0 0;
padding: 0 20px 0; } }
.intro .intro-img01 {
width: 27.7%;
max-width: 489px;
margin: 280px 0 0; }
@media (max-width: 768px) {
.intro .intro-img01 {
order: 3;
width: 226px;
margin: 0; } }
.intro .intro-text {
width: 31%;
max-width: 497px;
margin: 0 4% 0 3.2%; }
@media (max-width: 768px) {
.intro .intro-text {
order: 1;
width: 100%;
margin: 0 0 36px; } }
.intro .intro-text .en-heading .circle img {
width: 102px;
margin: 0; }
@media (max-width: 768px) {
.intro .intro-text .en-heading img {
display: block;
width: 280px;
margin: 0 0 32px; } }
.intro .intro-text .en-heading span {
margin: 0 0 28px;
font-size: 2.4rem; }
@media (max-width: 768px) {
.intro .intro-text .en-heading span {
margin: 0 0 20px;
font-size: 1.6rem; } }
.intro .intro-text p {
font-size: 2rem;
line-height: 52px;
font-weight: 500; }
@media (max-width: 768px) {
.intro .intro-text p {
font-size: 1.4rem;
line-height: 2; } }
.intro .intro-img02 {
width: 34.3%;
height: 636px;
position: relative; }
@media (max-width: 768px) {
.intro .intro-img02 {
order: 2;
width: 320px;
height: auto;
margin: 0 0 40px calc(100vw - 320px); } }
.intro .intro-img02 .inner-intro-img02 img {
position: absolute;
top: 20%;
right: 0;
width: 100%;
max-width: 666px; }
@media (max-width: 768px) {
.intro .intro-img02 .inner-intro-img02 img {
position: static; } }
/***** New topics *****/
.new-topic {
margin: 126px auto 0; }
@media (max-width: 768px) {
.new-topic {
margin: 106px auto 0;
padding: 0 20px 0; } }
.new-topic .new-topic-inner .jp-en-head {
margin: 0 0 66px; }
@media (max-width: 768px) {
.new-topic .new-topic-inner .jp-en-head {
margin: 0 0 32px; } }
.new-topic .new-topic-inner .jp-en-head .en-heading {
margin: 0 18px 0 0; }
@media (max-width: 768px) {
.new-topic .new-topic-inner .jp-en-head .en-heading {
margin: 0 19px 0 0; } }
.new-topic .new-topic-inner .jp-en-head .en-heading:before {
width: 110px;
height: 20px;
background: url("../images/new-topics.png") no-repeat;
background-size: cover; }
@media (max-width: 768px) {
.new-topic .new-topic-inner .jp-en-head .en-heading:before {
width: 87px;
height: 15px;
background: url("../images/new-topics-sp.png") no-repeat;
background-size: cover; } }
.new-topic .new-topic-inner .jp-en-head .en-heading img {
width: 132px; }
@media (max-width: 768px) {
.new-topic .new-topic-inner .jp-en-head .en-heading img {
width: 93px; } }
.new-topic .new-topic-inner .jp-en-head:after {
content: "";
width: calc(100% - 150px);
height: 0.5px;
background: #B3D2E6; }
@media (max-width: 768px) {
.new-topic .new-topic-inner .jp-en-head:after {
width: calc(100% - 112px); } }
/*******************************
記事一覧ページ
*******************************/
.archives .archives-inner .archives-head {
display: flex;
justify-content: space-between;
margin: 0 0 40px; }
@media (max-width: 768px) {
.archives .archives-inner .archives-head {
margin: 0 0 30px; } }
.archives .archives-inner .archives-head .en-heading {
width: 113px; }
.archives .archives-inner .archives-head .en-heading img {
margin: 0; }
.archives .archives-inner .archives-head .post-count {
font-size: 1.8rem;
color: #5E7F95; }
@media (max-width: 768px) {
.archives .archives-inner .archives-head .post-count {
font-size: 1.2rem; } }
.archives .archives-inner .archives-head .post-count span {
display: inline-block;
margin: 0 6px 0;
font-size: 2rem;
color: #5E7F95; }
@media (max-width: 768px) {
.archives .archives-inner .archives-head .post-count span {
font-size: 1.2rem; } }
.archives .pagenation ul {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap; }
.archives .pagenation ul li {
margin: 0 44px 24px 0;
list-style: none; }
@media (max-width: 768px) {
.archives .pagenation ul li {
margin: 0 30px 24px 0; } }
.archives .pagenation ul li.current {
width: 45px;
height: 45px;
border-radius: 45px;
background: linear-gradient(180deg, #2b7cb2, #12496e); }
@media (max-width: 768px) {
.archives .pagenation ul li.current {
width: 30px;
height: 30px; } }
.archives .pagenation ul li.current span {
line-height: 45px;
color: #fff;
text-align: center; }
@media (max-width: 768px) {
.archives .pagenation ul li.current span {
line-height: 30px; } }
.archives .pagenation ul li.prev a img, .archives .pagenation ul li.next a img {
width: 15px; }
.archives .pagenation ul li.prev {
margin: 0 80px 24px 0; }
@media (max-width: 768px) {
.archives .pagenation ul li.prev {
margin: 0 40px 24px 0; } }
.archives .pagenation ul li.prev a img {
transform: rotate(180deg); }
.archives .pagenation ul li.next {
margin: 0 0 24px 36px; }
@media (max-width: 768px) {
.archives .pagenation ul li.next {
margin: 0 0 24px 16px; } }
.archives .pagenation ul li.dots span {
font-size: 2rem;
color: #12496E; }
@media (max-width: 768px) {
.archives .pagenation ul li.dots span {
font-size: 1.4rem; } }
.archives .pagenation ul li a, .archives .pagenation ul li span {
display: block;
font-size: 2rem;
font-weight: 500; }
@media (max-width: 768px) {
.archives .pagenation ul li a, .archives .pagenation ul li span {
font-size: 1.4rem; } }
.archives .pagenation ul li a {
color: #12496E;
text-decoration: none; }
.archives .pagenation ul li a:hover {
text-decoration: underline; }
/*******************************
記事ページ
*******************************/
.post-bread:after {
display: none; }
.post {
max-width: 1200px;
margin: 0 auto 80px;
padding: 96px 100px 40px;
box-sizing: border-box;
background: #fff; }
@media (max-width: 768px) {
.post {
margin: 0;
padding: 24px 15px 0; } }
.post .post-inner .post-head {
margin: 0 0 50px; }
@media (max-width: 768px) {
.post .post-inner .post-head {
margin: 0 0 20px; } }
.post .post-inner .post-head h1 {
margin: 0 0 40px;
font-size: 3rem; }
@media (max-width: 768px) {
.post .post-inner .post-head h1 {
margin: 0 0 30px;
font-size: 2.4rem; } }
.post .post-inner .post-head .name {
font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
font-size: 2.4rem;
color: #12496E; }
@media (max-width: 768px) {
.post .post-inner .post-head .name {
font-size: 1.8rem; } }
.post .post-inner .post-head .name span {
display: block;
font-size: 1.4rem;
color: #12496E; }
@media (max-width: 768px) {
.post .post-inner .post-head .name span {
font-size: 1.2rem; } }
.post .post-inner .post-head .name + p {
margin: -32px 0 0; }
@media (max-width: 768px) {
.post .post-inner .post-head .name + p {
margin: -2px 0 0;
font-size: 1.5rem; } }
.post .post-inner img {
display: block;
margin: 64px 0; }
@media (max-width: 768px) {
.post .post-inner img {
margin: 30px 0; } }
.post .post-inner .caption {
margin: -42px 0 64px;
font-size: 1.4rem; }
.post .post-inner .caption a {
font-size: 1.4rem; }
@media (max-width: 768px) {
.post .post-inner .caption {
margin: -15px 0 30px;
font-size: 1.2rem; }
.post .post-inner .caption a {
font-size: 1.2rem; } }
.post .post-inner p, .post .post-inner a, .post .post-inner span {
font-size: 1.6rem;
line-height: 180%;
font-weight: 500; }
@media (max-width: 768px) {
.post .post-inner p, .post .post-inner a, .post .post-inner span {
font-size: 1.5rem; } }
.post .post-inner .intro-text {
margin: 0 0 80px; }
@media (max-width: 768px) {
.post .post-inner .intro-text {
margin: 0 0 30px; } }
.post .post-inner .post-index {
max-width: 800px;
margin: 0 auto 80px;
padding: 37px 40px 27px;
background: #F8F8F8; }
@media (max-width: 768px) {
.post .post-inner .post-index {
margin: 0 0 30px;
padding: 27px 25px 30px; } }
.post .post-inner .post-index .post-index-inner p {
margin: 0 0 27px;
font-weight: bold; }
@media (max-width: 768px) {
.post .post-inner .post-index .post-index-inner p {
font-size: 1.6rem; } }
.post .post-inner .post-index .post-index-inner ul {
display: block; }
.post .post-inner .post-index .post-index-inner ul li {
margin: 0 0 8px;
list-style: none; }
.post .post-inner .post-index .post-index-inner ul li a {
text-decoration: none;
color: #322B2A;
font-weight: 500; }
.post .post-inner h2 {
margin: 0 0 40px;
font-size: 3rem; }
@media (max-width: 768px) {
.post .post-inner h2 {
margin: 0 0 30px;
font-size: 2rem; } }
.post .post-inner h3 {
margin: 0 0 32px;
font-size: 2.6rem; }
@media (max-width: 768px) {
.post .post-inner h3 {
margin: 0 0 20px;
font-size: 1.8rem; } }
.post .post-inner h4 {
margin: 0 0 32px;
font-size: 2.2rem; }
@media (max-width: 768px) {
.post .post-inner h4 {
margin: 0 0 28px;
font-size: 1.6rem; } }
.post .post-inner p {
margin: 0 0 40px; }
@media (max-width: 768px) {
.post .post-inner p {
margin: 0 0 32px; } }
.post .post-inner .interviewer, .post .post-inner .interviewee {
font-weight: bold; }
.post .post-inner .interviewer {
margin: 64px 0 32px; }
@media (max-width: 768px) {
.post .post-inner .interviewer {
margin: 30px 0; } }
@media (max-width: 768px) {
.return-btn {
margin: -32px 0;
padding: 60px 0 44px;
background: #fff; } }
.return-btn .return-archives {
margin: 0 auto 96px; }
@media (max-width: 768px) {
.return-btn .return-archives {
display: flex;
width: 194px;
margin: 0 auto 70px;
padding: 0; }
.return-btn .return-archives span {
order: 2;
color: #12496E;
font-size: 1.6rem; }
.return-btn .return-archives .btn-arrow {
order: 1;
position: relative;
width: 50px;
height: 50px;
margin: 0 16px 0 0; }
.return-btn .return-archives .btn-arrow:after {
top: 0;
bottom: 0;
right: 0;
left: 0; } }
.related-posts {
max-width: 1200px;
margin: 0 auto 200px; }
@media (max-width: 768px) {
.related-posts {
margin: 0 auto;
padding: 0 15px 7px;
background: #fff; } }
.related-posts .related-posts-inner .jp-en-head {
margin: 0 0 55px; }
@media (max-width: 768px) {
.related-posts .related-posts-inner .jp-en-head {
margin: 0 0 26px; } }
.related-posts .related-posts-inner .jp-en-head .en-heading:before {
width: 125px;
height: 15px;
background: url("../images/recommentd_en.svg") no-repeat;
background-size: cover; }
@media (max-width: 768px) {
.related-posts .related-posts-inner .jp-en-head .en-heading:before {
width: 101px;
height: 12px;
background: url("../images/recommentd_en-sp.svg") no-repeat;
background-size: cover; } }
.related-posts .related-posts-inner .jp-en-head .en-heading img {
width: 197px; }
@media (max-width: 768px) {
.related-posts .related-posts-inner .jp-en-head .en-heading img {
width: 139px;
margin: 0 9px 0 0; } }
.related-posts .related-posts-inner .jp-en-head:after {
content: "";
width: calc(100% - 197px);
height: 0.5px;
background: #B3D2E6; }
@media (max-width: 768px) {
.related-posts .related-posts-inner .jp-en-head:after {
width: calc(100% - 149px); } }
@media (max-width: 768px) {
.related-posts .related-posts-inner .topics {
display: block;
width: 100%;
margin: 0; } }
.related-posts .related-posts-inner .topics li {
max-width: 384px;
margin: 0 24px 0 0; }
@media (max-width: 768px) {
.related-posts .related-posts-inner .topics li {
width: 100%;
margin: 0 0 20px; }
.related-posts .related-posts-inner .topics li a {
display: flex; }
.related-posts .related-posts-inner .topics li a .interviewee {
display: none; }
.related-posts .related-posts-inner .topics li a .topic-img {
margin: 0; }
.related-posts .related-posts-inner .topics li a .post-title {
margin: 0;
font-size: 1.5rem; } }
/*# sourceMappingURL=style.css.map */