@charset "utf-8"; /* ----------------------------------------------------------------- LAYOUT CSS LAST UPDATE: --------------------------------------------------------------------*/ /*-------------------------------- astionWrap ---------------------------------*/ #suntory_contents #astionWrap{ width: 1160px; margin: 0 auto;} .mbBottom{ margin-bottom: 35px !important;} @media screen and (max-width: 768px){ #suntory_contents #astionWrap{ width: auto; margin: 0 15px;} .mbBottom{ margin-bottom: 20px !important;} } /*-------------------------------- essay ---------------------------------*/ #suntory_contents #astionWrap.essay{} #suntory_contents #astionWrap.essay #mainSection .col2{ overflow: hidden;} #suntory_contents #astionWrap.essay #mainSection .col2 .left{ width: 430px; float: left; margin-bottom: 80px;} #suntory_contents #astionWrap.essay #mainSection .col2 .left .sideCont{ background: #bfd1c7; padding-bottom: 30px;} #suntory_contents #astionWrap.essay #mainSection .col2 .left img.essayImg{ width: 330px; height: auto; margin: 0 auto 45px; display: block; padding-top: 50px;} #suntory_contents #astionWrap.essay #mainSection .col2 .left .text{ width: 350px; margin: 0 auto;} #suntory_contents #astionWrap.essay #mainSection .col2 .left .text .explanationWrap p{ font-size: 1.4rem; margin-bottom: 30px;} #suntory_contents #astionWrap.essay #mainSection .col2 .left .text .explanationWrap p.title{ font-size: 1.6rem; font-weight: bold;} #suntory_contents #astionWrap.essay #mainSection .col2 .left .text .explanationWrap p.title small{ font-size: 1.4rem; font-weight: bold;} #suntory_contents #astionWrap.essay #mainSection .col2 .left .text .explanationWrap p.large{ font-size: 1.6rem;} #suntory_contents #astionWrap.essay #mainSection .col2 .left .text .explanationWrap a{ color: #000;} #suntory_contents #astionWrap.essay #mainSection .col2 .left .text .explanationWrap a:hover{ text-decoration: none;} #suntory_contents #astionWrap.essay #mainSection .col2 .left .text .explanationWrap table, #suntory_contents #astionWrap.essay #mainSection .col2 .left .text .explanationWrap table tr th, #suntory_contents #astionWrap.essay #mainSection .col2 .left .text .explanationWrap table tr td, #suntory_contents #astionWrap.essay #mainSection .col2 .left .text .explanationWrap ul li{ font-size: 1.4rem;} #suntory_contents #astionWrap.essay #mainSection .col2 .left .text .explanationWrap table{ margin-bottom: 30px;} #suntory_contents #astionWrap.essay #mainSection .col2 .left .text .explanationWrap table tr td{ margin-bottom: 5px; line-height: 1.5;} #suntory_contents #astionWrap.essay #mainSection .col2 .left .text .explanationWrap table tr td.indent{ text-indent: -1.5em; padding-left: 1.5em;} #suntory_contents #astionWrap.essay #mainSection .col2 .left .text .explanationWrap table tr td.indent2{ text-indent: -4em; padding-left: 4em;} #suntory_contents #astionWrap.essay #mainSection .col2 .left .text .explanationWrap ul{ margin: 5px 0 30px;} #suntory_contents #astionWrap.essay #mainSection .col2 .left .text .explanationWrap ul li{ list-style: disc; margin-left: 40px;} #suntory_contents #astionWrap.essay #mainSection .col2 .left .text p{ font-size: 1.4rem;} #suntory_contents #astionWrap.essay #mainSection .col2 .left .text p strong{ font-size: 1.6rem;} #suntory_contents #astionWrap.essay #mainSection .col2 .left .text p small{ font-size: 1.2rem;} #suntory_contents #astionWrap.essay #mainSection .col2 .left .tagWrap2{ margin-top: 12px; display: block;} #suntory_contents #astionWrap.essay #mainSection .col2 .left .tagWrap2 a{ display: inline-block; margin-right: 15px; font-size: 1.4rem; color: #999; text-decoration: none;} #suntory_contents #astionWrap.essay #mainSection .col2 .left .tagWrap2 a span{ font-size: 1.4rem; color: #bfd1c7; display: inline-block;} #suntory_contents #astionWrap.essay #mainSection .col2 .left .tagWrap2 a:hover{ color: #bfd1c7;} /*#suntory_contents #astionWrap.essay #mainSection .col2 .left .tagWrap2 a:hover span{ color: #999;}*/ /*right*/ #suntory_contents #astionWrap.essay #mainSection .col2 .right{ width: calc(100% - 480px); padding-top: 50px; float: right;} #suntory_contents #astionWrap.essay #mainSection .col2 .right .discArea.pcOnlyImg{ margin-bottom: 40px;} #suntory_contents #astionWrap.essay #mainSection .col2 .right time{ font-size: 1.4rem; margin-bottom: 20px; padding-left: 5px;} #suntory_contents #astionWrap.essay #mainSection .col2 .right h2{ font-size: 3.6rem; font-weight: normal; margin: 10px 0 5px;} #suntory_contents #astionWrap.essay #mainSection .col2 .right p.author{ font-size: 2.4rem; padding-left: 5px;} #suntory_contents #astionWrap.essay #mainSection .col2 .right p.text{ font-size: 1.6rem; margin-bottom: 30px; line-height: 1.8; padding-left: 5px;} #suntory_contents #astionWrap.essay #mainSection .col2 .right .textArea p.text{padding-left: 0;} #suntory_contents #astionWrap.essay #mainSection .col2 .right p.text strong{ font-size: 1.6rem; line-height: 1.8; font-weight: bold;} #suntory_contents #astionWrap.essay #mainSection .col2 .right p.text span{ display: block; font-size: 1.6rem;} #suntory_contents #astionWrap.essay #mainSection .col2 .right p.text span.omit{ font-size: 1.6rem;} #suntory_contents #astionWrap.essay #mainSection .col2 .right p.img img{ margin: 0 auto; display: block;} #suntory_contents #astionWrap.essay #mainSection .col2 .right p.sub{ font-size: 2.4rem; margin: 10px 0;} #suntory_contents #astionWrap.essay #mainSection .col2 .right p.tagWrap2.copy a{ display: inline-block; font-size: 1.4rem; margin-right: 15px; color: #999; text-decoration: none; padding-left: 5px;} #suntory_contents #astionWrap.essay #mainSection .col2 .right p.tagWrap2 a:hover{ color: #bfd1c7;} #suntory_contents #astionWrap.essay #mainSection ul.bottomBtn{ position: relative; padding-bottom: 260px;} #suntory_contents #astionWrap.essay #mainSection ul.bottomBtn li{ position: absolute; top: 0;} #suntory_contents #astionWrap.essay #mainSection ul.bottomBtn li.back{ right: 0;} #suntory_contents #astionWrap.essay #mainSection ul.bottomBtn li.top{ left: 50%; transform: translateX(-50%);} #suntory_contents #astionWrap.essay #mainSection ul.bottomBtn li.next{ left: 0;} #suntory_contents #astionWrap.essay #mainSection ul.bottomBtn li a{ padding: 15px 0; text-align: center; margin: 0 auto; font-size: 1.8rem; font-weight: bold; color: #000; cursor: pointer; text-decoration: none; width: 250px; display: block;border: 2px solid #000; line-height: 27px;} #suntory_contents #astionWrap.essay #mainSection ul.bottomBtn li a span{ font-size: 1.8rem; font-weight: bold; color: #000; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: inline-block; width: 85%; line-height: 24px; vertical-align: sub;} #suntory_contents #astionWrap.essay #mainSection ul.bottomBtn li a:hover{ background: #bfd1c7;} #suntory_contents #astionWrap.essay #mainSection ul.bottomBtn li.back{ margin-right: 0;} #suntory_contents #astionWrap.essay #mainSection ul.bottomBtn li.next{ margin-left: 0;} #suntory_contents #astionWrap.essay #mainSection .col2 .right .textArea{ margin-bottom: 80px;} #suntory_contents #astionWrap.essay #mainSection .col2 .right a{ color: #000;} #suntory_contents #astionWrap.essay #mainSection .col2 .right a:hover{ text-decoration: none;} @media screen and (max-width: 768px){ #suntory_contents #astionWrap.essay #mainSection .col2 .left{ width: 100%; float: none; margin-bottom: 0;} #suntory_contents #astionWrap.essay #mainSection .col2 .left .sideCont{ padding-bottom: 0;} #suntory_contents #astionWrap.essay #mainSection .col2 .left img.essayImg{ width: calc(50% - 20px); height: auto; margin: 10px 0 10px 10px; display: inline-block; vertical-align: middle; padding: 0;} #suntory_contents #astionWrap.essay #mainSection .col2 .left .text{ width: calc(50% - 20px); display: inline-block; margin: 10px 0 10px 10px; vertical-align: middle; padding: 0;} #suntory_contents #astionWrap.essay #mainSection .col2 .left .text time{ font-size: 1.1rem;} #suntory_contents #astionWrap.essay #mainSection .col2 .left .text h2{ font-size: 1.3rem; margin: 10px 0; font-weight: normal;} #suntory_contents #astionWrap.essay #mainSection .col2 .left .text p.author{ font-size: 1.1rem;} #suntory_contents #astionWrap.essay #mainSection .col2 .left .tagWrap2{ margin-top: 10px;} #suntory_contents #astionWrap.essay #mainSection .col2 .left .tagWrap2 a{ margin-right: 10px; font-size: 1.1rem;} #suntory_contents #astionWrap.essay #mainSection .col2 .left .tagWrap2 a span{ font-size: 1.1rem;} /*right*/ #suntory_contents #astionWrap.essay #mainSection .col2 .right{ width: 100%; padding-top: 20px; float: none;} #suntory_contents #astionWrap.essay #mainSection .col2 .right p.text{ font-size: 1.1rem; line-height: 1.8; padding-left: 0;} #suntory_contents #astionWrap.essay #mainSection .col2 .right p.text strong{ font-size: 1.1rem; line-height: 1.8; font-weight: bold;} #suntory_contents #astionWrap.essay #mainSection .col2 .right p.text span{ display: block; font-size: 1.1rem;} #suntory_contents #astionWrap.essay #mainSection .col2 .right p.text span.omit{ font-size: 1.6rem;} #suntory_contents #astionWrap.essay #mainSection .col2 .right p.text:last-child{margin-bottom: 0;} #suntory_contents #astionWrap.essay #mainSection .col2 .right p.img img{ width: 100%; height: auto;} #suntory_contents #astionWrap.essay #mainSection ul.bottomBtn{ margin-top: 30px; padding-bottom: 115px;} #suntory_contents #astionWrap.essay #mainSection ul.bottomBtn li{ width: calc(33% - 10px);} #suntory_contents #astionWrap.essay #mainSection ul.bottomBtn li a{ padding: 15px 0; text-align: center; margin: 0 auto; font-size: 1.1rem; font-weight: bold; color: #000; cursor: pointer; text-decoration: none; width: 100%; display: block;border: 2px solid #000; height: 18px; line-height: 17px;} #suntory_contents #astionWrap.essay #mainSection ul.bottomBtn li a span{ font-size: 1.1rem; font-weight: bold; color: #000; width: 80%; line-height: 20px; vertical-align: middle;} #suntory_contents #astionWrap.essay #mainSection ul.bottomBtn li a:hover{ background: #bfd1c7;} #suntory_contents #astionWrap.essay #mainSection ul.bottomBtn li.back{ margin-left: 0;} #suntory_contents #astionWrap.essay #mainSection ul.bottomBtn li.next{ margin-right: 0;} #suntory_contents #astionWrap.essay #mainSection .col2 .right .textArea{ padding-bottom: 25px; margin-bottom: 0; border-bottom: 1px solid #bfd1c7;} #suntory_contents #astionWrap.essay #mainSection .col2 .right .explanationWrap{ margin-top: 30px; line-height: 1.8;} #suntory_contents #astionWrap.essay #mainSection .col2 .right .explanationWrap p{ font-size: 1.1rem; margin-bottom: 20px;} #suntory_contents #astionWrap.essay #mainSection .col2 .right .explanationWrap p.title{ font-size: 1.1rem; font-weight: bold;} #suntory_contents #astionWrap.essay #mainSection .col2 .right .explanationWrap p.title small{ font-size: 1.0rem; font-weight: bold;} #suntory_contents #astionWrap.essay #mainSection .col2 .right .explanationWrap table, #suntory_contents #astionWrap.essay #mainSection .col2 .right .explanationWrap table tr th, #suntory_contents #astionWrap.essay #mainSection .col2 .right .explanationWrap table tr td, #suntory_contents #astionWrap.essay #mainSection .col2 .right .explanationWrap ul li{ font-size: 1.1rem;} #suntory_contents #astionWrap.essay #mainSection .col2 .right .explanationWrap table{ margin-bottom: 20px; width: auto;} #suntory_contents #astionWrap.essay #mainSection .col2 .right .explanationWrap table.spacing{ border-collapse: separate; border-spacing: 10px 0px; width: 100% !important;} #suntory_contents #astionWrap.essay #mainSection .col2 .right .explanationWrap table td.indent{ text-indent: -1.5em; padding-left: 1.5em;} #suntory_contents #astionWrap.essay #mainSection .col2 .right .explanationWrap table td.indent2{ text-indent: -4em; padding-left: 4em;} #suntory_contents #astionWrap.essay #mainSection .col2 .right .explanationWrap ul{ margin: 5px 0 20px;} #suntory_contents #astionWrap.essay #mainSection .col2 .right .explanationWrap ul li{ list-style: disc; margin-left: 15px;} } /*-------------------------------- tagSection ---------------------------------*/ #suntory_contents #tagSection{} #suntory_contents #tagSection .searchList{ display: block; text-align: center; margin-bottom: 50px;} #suntory_contents #tagSection .searchList li{ display: inline-block; margin-right: 10px;} #suntory_contents #tagSection .searchList li:last-child{ margin-right: 0;} #suntory_contents #tagSection .searchList li a{ font-size: 1.4rem; color: #999; text-decoration: none; pointer-events: none;} #suntory_contents #tagSection .searchList li a span{ font-size: 1.4rem; color: #bfd1c7;} #suntory_contents #tagSection .searchList li a:hover{ color: #bfd1c7 !important;} @media screen and (max-width: 768px){ #suntory_contents #tagSection .searchList{ margin-bottom: 30px; line-height: 1.8;} #suntory_contents #tagSection .searchList li a{ font-size: 1.1rem; display: inline-block; padding: 2px 0;} #suntory_contents #tagSection .searchList li a span{ font-size: 1.1rem;} } /*-------------------------------- discSection ---------------------------------*/ #suntory_contents #discSection{ background: #bfd1c7; color: #000; padding: 50px;} #suntory_contents #discSection .col2{ overflow: hidden;} #suntory_contents #discSection .col2 .left{ float: left; width: 330px;} #suntory_contents #discSection .col2 .left p:hover{ background: #bfd1c7; opacity: 1;} #suntory_contents #discSection .col2 .left p:hover img{ opacity: 0.5;} #suntory_contents #discSection .col2 .right{ float: right; width: calc(100% - 415px); min-height: 285px; background: #fff; padding: 25px 20px 20px 20px; position: relative;} #suntory_contents #discSection .col2 .right a{ text-decoration: none; color: #000;} #suntory_contents #discSection .col2 .right a:hover{ color: #bfd1c7;} #suntory_contents #discSection .col2 .right a.hover{ color: #bfd1c7;} #suntory_contents #discSection .col2 .right time{ font-size: 1.4rem; margin-bottom: 20px; padding-left: 5px;} #suntory_contents #discSection .col2 .right h2{ font-size: 3.6rem; font-weight: normal; margin: 10px 0 5px;} #suntory_contents #discSection .col2 .right p.author{ font-size: 2.4rem; margin-bottom: 15px; padding-left: 5px;} #suntory_contents #discSection .col2 .right p.text{ font-size: 1.6rem; margin-bottom: 15px; line-height: 1.8; padding-left: 5px;} #suntory_contents #discSection .col2 .right p.text span.omit{ font-size: 1.6rem;} #suntory_contents #discSection .col2 .right p.tagWrap2 a{ display: inline-block; font-size: 1.4rem; margin-right: 15px; color: #999; text-decoration: none; padding-left: 5px;} #suntory_contents #discSection .col2 .right p.tagWrap2 a:hover{ color: #bfd1c7 !important;} #suntory_contents #discSection .col2 .right p.tagWrap2 a span{ font-size: 1.4rem; color: #bfd1c7;} #suntory_contents #discSection .col2 .right a.arrow{ position: absolute; bottom: 30px; right: 30px;} #suntory_contents #discSection .col2 .right #copyTag{ padding-bottom: 30px;} @media screen and (max-width: 768px){ #suntory_contents #discSection{ padding: 15px;} #suntory_contents #discSection .col2 .left{ float: none; width: 100%; margin-bottom: 15px;} #suntory_contents #discSection .col2 .left p{ width: 60%; margin: 0 auto;} #suntory_contents #discSection .col2 .left p img{ width: 100%; height: auto;} #suntory_contents #discSection .col2 .right{ float: none; width: auto; min-height: 0; padding: 10px;} #suntory_contents #discSection .col2 .right time{ font-size: 1.1rem; margin-bottom: 10px; padding-left: 0;} #suntory_contents #discSection .col2 .right h2{ font-size: 1.3rem; margin: 5px 0;} #suntory_contents #discSection .col2 .right p.author{ font-size: 1.1rem; margin-bottom: 15px; padding-left: 0;} #suntory_contents #discSection .col2 .right p.text{ font-size: 1.1rem; margin-bottom: 10px; line-height: 1.5; padding-left: 0;} #suntory_contents #discSection .col2 .right p.text span.omit{ font-size: 1.1rem;} #suntory_contents #discSection .col2 .right p.tagWrap2 a{ font-size: 1.1rem; margin-right: 10px; padding-left: 0;} #suntory_contents #discSection .col2 .right p.tagWrap2 a span{ font-size: 1.1rem;} #suntory_contents #discSection .col2 .right a.arrow{ position: static; display: table; margin: 5px 5px 0 auto; width: 35px;} #suntory_contents #discSection .col2 .right a.arrow img{ width: 100%; height: auto;} #suntory_contents #discSection .col2 .right #copyTag{ padding-bottom: 5px;} } /*-------------------------------- mainSection ---------------------------------*/ #suntory_contents #mainSection{} /*sortItem*/ #suntory_contents #mainSection .sortItemArea{ font-size: 0; display: block; margin: 0 0 50px; min-height: 397px; transition: 0.4s; /*opacity: 0;*/} #suntory_contents #mainSection .sortItemArea li{ display: inline-block; width: calc(25% - 56px); margin: 0 28px 60px 28px; vertical-align: top;} #suntory_contents #mainSection .sortItemArea li.show{ opacity: 1;} #suntory_contents #mainSection .sortItemArea li a{ display: block; text-decoration: none; color: #000;} #suntory_contents #mainSection .sortItemArea li a:hover{ color: #bfd1c7;} #suntory_contents #mainSection .sortItemArea li a time{ display: block; font-size: 1.4rem; margin: 10px 0 5px;} #suntory_contents #mainSection .sortItemArea li a span{ display: block; font-size: 1.4rem;} #suntory_contents #mainSection .sortItemArea li a span.img{ display: block;} #suntory_contents #mainSection .sortItemArea li a:hover span.img{ background: #bfd1c7; opacity: 1;} #suntory_contents #mainSection .sortItemArea li a img{ display: block; width: 100%; height: auto; margin: 0 auto;} #suntory_contents #mainSection .sortItemArea li a:hover span.img img{ opacity: 0.5;} #suntory_contents #mainSection .sortItemArea li a span.title{ font-size: 1.8rem;} #suntory_contents #mainSection .sortItemArea li a span.author{ margin: 10px 0 0;} #suntory_contents #mainSection .sortItemArea li span.tagWrap{ margin-top: 12px; display: block;} #suntory_contents #mainSection .sortItemArea li span.tagWrap a{ display: inline-block; margin-right: 15px; font-size: 1.4rem; color: #999;} #suntory_contents #mainSection .sortItemArea li span.tagWrap a span{ font-size: 1.4rem; color: #bfd1c7; display: inline-block;} #suntory_contents #mainSection .sortItemArea li span.tagWrap a:hover{ color: #bfd1c7;} #suntory_contents #mainSection .btn{ display: table; padding: 15px 72px; border: 2px solid #000; text-align: center; margin: 0 auto; font-size: 1.8rem; font-weight: bold; cursor: pointer; position: relative;} #suntory_contents #mainSection .btn:before{ content: ""; position: absolute; background: url(/sfnd/scholarship/img/img_arror_b.png) no-repeat; background-size: 100% auto; width: 11px; height: 40px; display: block; bottom: -30px; left: 50%; transform: translateX(-50%);} #suntory_contents #mainSection .btn:hover{ background: #bfd1c7;} #suntory_contents #mainSection .btn:hover:before{ bottom: -40px; transition: 0.4s;} #suntory_contents #mainSection .textBox{ margin-bottom: 250px;} #suntory_contents #mainSection .textBox .boxInner{ width: 670px; text-align: center; margin: 30px auto 0;} #suntory_contents #mainSection .textBox .boxInner img{ width: 100%; height: auto;} @media screen and (max-width: 768px){ /*sortItem*/ #suntory_contents #mainSection .sortItemArea{ margin: 0 0 65px;} #suntory_contents #mainSection .sortItemArea li{ width: calc(50% - 20px); margin: 0 10px 40px 10px;} #suntory_contents #mainSection .sortItemArea li a time{ font-size: 1.1rem; margin: 5px 0 2px;} #suntory_contents #mainSection .sortItemArea li a span{ font-size: 1.1rem;} #suntory_contents #mainSection .sortItemArea li a span.title{ font-size: 1.3rem;} #suntory_contents #mainSection .sortItemArea li a span.author{ margin: 5px 0 0;} #suntory_contents #mainSection .sortItemArea li span.tagWrap{ margin-top: 5px;} #suntory_contents #mainSection .sortItemArea li span.tagWrap a{ margin-right: 12px; font-size: 1.1rem;} #suntory_contents #mainSection .sortItemArea li span.tagWrap a span{ font-size: 1.1rem;} #suntory_contents #mainSection .btn{ padding: 15px 35px; font-size: 1.1rem;} #suntory_contents #mainSection .btn:before{ content: ""; position: absolute; background: url(/sfnd/scholarship/img/img_arror_b.png) no-repeat; background-size: 100% auto; width: 11px; height: 40px; display: block; bottom: -30px; left: 50%;} #suntory_contents #mainSection .btn:hover{ background: #bfd1c7;} #suntory_contents #mainSection .btn:hover:before{ bottom: -40px; transition: 0.4s;} /*textBox*/ #suntory_contents #mainSection .textBox{ margin-bottom: 65px;} #suntory_contents #mainSection .textBox .boxInner{ width: 100%;} } /*-------------------------------- bottom ---------------------------------*/ .linkImg{ position: relative;} .linkImg a{ position: absolute; bottom: 20px; left: 0; width: 386px; height: 70px;} .linkImg a img{ width: 100%; height: auto;} .pagetop{ position: relative;} .pagetop a{ position: absolute; bottom: 0; right: 65px; width: 70px; height: 70px; opacity: 0;} .essay .pagetop a{ right: 0;} .pagetop a img{ width: 100%; height: auto;} .pagetop a.show { opacity: 1;} .pagetop a.fixed { position: fixed; bottom: 0; right: 65px; transition: opacity 0.4s ease;} .essay .pagetop a.fixed{ right: 65px;} .hidden{ display: none;} @media screen and (max-width: 768px){ .linkImg a{ position: absolute; bottom: -7px; left: 0; width: 80%; max-width: 426px; height: auto;} .linkImg a img{ width: 100%; height: auto;} .pagetop a{ position: absolute; bottom: 0; right: 15px; width: 35px; height: 35px;} .essay .pagetop a{ right: 0;} .pagetop a img{ width: 100%; height: auto;} .pagetop a.fixed { right: 15px;} .essay .pagetop a.fixed{ right: 15px;} } /*-------------------------------- mvSection ---------------------------------*/ #suntory_contents #mvSection h1{margin: 70px 0 60px 0; font-size:32px;} #suntory_contents #mvSection h1 img{ width: 350px; height: auto;} @media screen and (max-width: 768px){ #suntory_contents #mvSection h1{margin: 30px auto; width: 90%; font-size: 5.5vw;} #suntory_contents #mvSection h1 img{ width: 100%; height: auto;} } [data-ruby] { position: relative; font-size: 1.6rem; display: inline-block !important; } [data-ruby]::before { content: attr(data-ruby); position: absolute; top: -0.8em; left: 0; right: 0; margin: auto; font-size: 1em; } /*-------------------------------- special ---------------------------------*/ #suntory_contents #astionWrap.essay #mainSection .special{} #suntory_contents #astionWrap.essay #mainSection .special .mvWrap{ width: 1160px;} #suntory_contents #astionWrap.essay #mainSection .special .mvWrap img{ width: 100%;} #suntory_contents #astionWrap.essay #mainSection .special .col2 .right .discArea{ margin-bottom: 40px;} #suntory_contents #astionWrap.essay #mainSection .special .col2 .right .discArea time{ padding-left: 0; font-size: 1.4rem;} #suntory_contents #astionWrap.essay #mainSection .special .col2 .right .discArea h2{ font-size: 3.6rem; font-weight: normal; margin: 10px 0 5px;} #suntory_contents #astionWrap.essay #mainSection .special .col2 .right .discArea p.sub{ font-size: 2.4rem;} #suntory_contents #astionWrap.essay #mainSection .special .col2 .right .discArea p.tagWrap2.copy a{ padding-left: 0;} /*authorWrap*/ #suntory_contents #astionWrap.essay #mainSection .special .authorWrap{ background: #bfd1c7; color: #000; padding: 50px; margin-bottom: 50px;} #suntory_contents #astionWrap.essay #mainSection .special .authorWrap{ overflow: hidden;} #suntory_contents #astionWrap.essay #mainSection .special .authorWrap .cell{ float: left; width: 505px;} #suntory_contents #astionWrap.essay #mainSection .special .authorWrap .cell.right{ float: right;} #suntory_contents #astionWrap.essay #mainSection .special .authorWrap .cell .img{ width: 200px;} #suntory_contents #astionWrap.essay #mainSection .special .authorWrap .cell .img img{ width: 100%; height: auto;} #suntory_contents #astionWrap.essay #mainSection .special .authorWrap .cell .author{ font-weight: bold; font-size: 1.6rem; margin: 30px 0 20px;} #suntory_contents #astionWrap.essay #mainSection .special .authorWrap .cell .text{ font-size: 1.6rem;} /*discSecBottom*/ #suntory_contents #astionWrap.essay #mainSection .special .discSecBottom{ background: #eaeaea; margin-bottom: 80px;} #suntory_contents #astionWrap.essay #mainSection .special .discSecBottom a{ display: block; text-decoration: none; color: #000; padding: 35px 50px;} #suntory_contents #astionWrap.essay #mainSection .special .discSecBottom .left{ display: inline-block; width: 230px; vertical-align: middle;} #suntory_contents #astionWrap.essay #mainSection .special .discSecBottom .left img{ width: 100%;} #suntory_contents #astionWrap.essay #mainSection .special .discSecBottom .right{ display: inline-block; width: calc(100% - 260px); padding: 0 0 0 20px; vertical-align: middle;} #suntory_contents #astionWrap.essay #mainSection .special .discSecBottom .right time{ font-size: 1.6rem; margin-bottom: 35px; display: block; font-weight: bold;} #suntory_contents #astionWrap.essay #mainSection .special .discSecBottom .right h2{ font-size: 3.6rem; font-weight: normal; margin: 0 0 10px;} #suntory_contents #astionWrap.essay #mainSection .special .discSecBottom .right p.sub{ font-size: 2.4rem; margin-bottom: 10px;} #suntory_contents #astionWrap.essay #mainSection .special .discSecBottom a:hover .left{ opacity: 0.7;} #suntory_contents #astionWrap.essay #mainSection .special .discSecBottom a:hover .right{ opacity: 0.7;} /*caption*/ #suntory_contents #astionWrap.essay #mainSection .special .col2{ position: relative;} #suntory_contents #astionWrap.essay #mainSection .special .col2 .right .textArea p.img{ position: absolute; width: 330px; left: 100px;} #suntory_contents #astionWrap.essay #mainSection .special .col2 .right .textArea p.img img{ width: 100%; height: auto;} /*vol077*/ #suntory_contents #astionWrap.essay #mainSection .special .col2 .right .textArea p.img.vol077.cap01{ top: 50px;} #suntory_contents #astionWrap.essay #mainSection .special .col2 .right .textArea p.img.vol077.cap02{ top: 870px;} #suntory_contents #astionWrap.essay #mainSection .special .col2 .right .textArea p.img.vol077.cap03{ top: 1500px;} #suntory_contents #astionWrap.essay #mainSection .special .col2 .right .textArea p.img.vol077.cap04{ top: 2140px;} #suntory_contents #astionWrap.essay #mainSection .special .col2 .right .textArea p.img.vol077.cap05{ top: 2780px;} #suntory_contents #astionWrap.essay #mainSection .special .col2 .right .textArea p.img.vol077.cap06{ top: 3430px;} #suntory_contents #astionWrap.essay #mainSection .special .col2 .right .textArea p.img.vol077.cap07{ top: 4080px;} #suntory_contents #astionWrap.essay #mainSection .special .col2 .right .textArea p.img.vol077.cap08{ top: 4750px;} /*vol084*/ #suntory_contents #astionWrap.essay #mainSection .special .col2 .right .textArea p.img.vol084.cap01{ top: 50px;} #suntory_contents #astionWrap.essay #mainSection .special .col2 .right .textArea p.img.vol084.cap02{ top: 1085px;} #suntory_contents #astionWrap.essay #mainSection .special .col2 .right .textArea p.img.vol084.cap03{ top: 2110px;} #suntory_contents #astionWrap.essay #mainSection .special .col2 .right .textArea p.img.vol084.cap04{ top: 3135px;} #suntory_contents #astionWrap.essay #mainSection .special .col2 .right .textArea p.img.vol084.cap05{ top: 4155px;} /*vol093*/ #suntory_contents #astionWrap.essay #mainSection .special .col2 .right .textArea p.img.vol093.cap01{ top: 50px;} #suntory_contents #astionWrap.essay #mainSection .special .col2 .right .textArea p.img.vol093.cap02{ top: 1085px;} #suntory_contents #astionWrap.essay #mainSection .special .col2 .right .textArea p.img.vol093.cap03{ top: 2110px;} #suntory_contents #astionWrap.essay #mainSection .special .col2 .right .textArea p.img.vol093.cap04{ top: 3135px;} #suntory_contents #astionWrap.essay #mainSection .special .col2 .right .textArea p.img.vol093.cap05{ top: 4155px;} #suntory_contents #astionWrap.essay #mainSection .special .col2 .right .textArea p.img.vol093.cap06{ top: 5180px;} /*vol094*/ #suntory_contents #astionWrap.essay #mainSection .special .col2 .right .textArea p.img.vol094.cap01{ top: 50px;} #suntory_contents #astionWrap.essay #mainSection .special .col2 .right .textArea p.img.vol094.cap02{ top: 1174px;} #suntory_contents #astionWrap.essay #mainSection .special .col2 .right .textArea p.img.vol094.cap03{ top: 2276px;} #suntory_contents #astionWrap.essay #mainSection .special .col2 .right .textArea p.img.vol094.cap04{ top: 3375px;} #suntory_contents #astionWrap.essay #mainSection .special .col2 .right .textArea p.img.vol094.cap05{ top: 4481px;} @media screen and (max-width: 768px){ /*mvWrap*/ #suntory_contents #astionWrap.essay #mainSection .special .mvWrap{ width: auto;} /*discArea*/ #suntory_contents #astionWrap.essay #mainSection .special .col2 .right .discArea{ margin-top: 15px;} #suntory_contents #astionWrap.essay #mainSection .special .col2 .right .discArea time{ padding-left: 0; font-size: 1.1rem;} #suntory_contents #astionWrap.essay #mainSection .special .col2 .right .discArea h2{ font-size: 2.4rem; font-weight: normal; margin: 20px 0 10px; line-height: 1;} #suntory_contents #astionWrap.essay #mainSection .special .col2 .right .discArea p.sub{ font-size: 1.5rem;} #suntory_contents #astionWrap.essay #mainSection .special .col2 .right .discArea p.tagWrap2.copy a{ padding-left: 0;} #suntory_contents #astionWrap.essay #mainSection .special .col2 .right .textArea{ padding-bottom: 50px;} /*caption*/ #suntory_contents #astionWrap.essay #mainSection .special .col2 .right .textArea p.img{ position: static; width: 100%; margin-bottom: 30px;} /*authorWrap*/ #suntory_contents #astionWrap.essay #mainSection .special .authorWrap{ padding: 25px; margin-bottom: 20px;} #suntory_contents #astionWrap.essay #mainSection .special .authorWrap .cell{ float: none; width: auto;} #suntory_contents #astionWrap.essay #mainSection .special .authorWrap .cell.right{ float: none; margin-top: 35px;} #suntory_contents #astionWrap.essay #mainSection .special .authorWrap .cell .img{ width: 100px;} #suntory_contents #astionWrap.essay #mainSection .special .authorWrap .cell .author{ font-size: 1.1rem; margin: 15px 0;} #suntory_contents #astionWrap.essay #mainSection .special .authorWrap .cell .text{ font-size: 1.1rem;} /*discSecBottom*/ #suntory_contents #astionWrap.essay #mainSection .special .discSecBottom{ margin-bottom: 40px;} #suntory_contents #astionWrap.essay #mainSection .special .discSecBottom a{ padding: 10px 0;} #suntory_contents #astionWrap.essay #mainSection .special .discSecBottom .left{ width: 40%; height: auto; margin: 0; display: inline-block; vertical-align: middle; padding: 0;} #suntory_contents #astionWrap.essay #mainSection .special .discSecBottom .right{ width: calc(60% - 20px); display: inline-block; margin: 0; vertical-align: middle; padding: 0;} #suntory_contents #astionWrap.essay #mainSection .special .discSecBottom .right time{ font-size: 1.1rem; margin-bottom: 20px;} #suntory_contents #astionWrap.essay #mainSection .special .discSecBottom .right h2{ font-size: 2.5rem; margin: 15px 0 10px;} #suntory_contents #astionWrap.essay #mainSection .special .discSecBottom .right p.sub{ font-size: 1.5rem; margin-bottom: 0;} }