@charset "utf-8";

@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
color: #212121;
font: 16px/1.87 "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
-webkit-text-size-adjust: 100%;
}
body.fix {
position: fixed;
width: 100%;
}
h1,h2,h3,h4,h5,h6 {
margin: 0;
font-size: 100%;
font-weight: normal;
line-height: 1.5;
}
p {
margin: 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
ol {
margin: 0;
padding: 0 0 0 24px;
}
dl,dt,dd {
margin: 0;
padding: 0;
}
a {
color: #333;
text-decoration: none;
transition: all 0.4s ease;
}
a:hover {
opacity: 0.6;
}
a img {
border: none;
}
img {
width: auto\9;
height: auto;
max-width: 100%;
border: 0;
vertical-align: middle;
-ms-interpolation-mode: bicubic;
}

table {
border-collapse: collapse;
}
input[type="text"],
input[type="password"],
input[type="number"],
input[type="submit"],
input[type="search"],
input[type="file"],
button,
select,
textarea {
margin: 0;
padding: 0;
font-size: 14px;
font-family: inherit;
}
input[type="text"],
input[type="password"],
input[type="number"],
input[type="submit"],
input[type="search"],
button,
textarea {
-webkit-appearance: none;
}
.clearfix {
zoom:1;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
.layout {
position: relative;
max-width: 1184px;
margin: 0 auto;
padding: 0 32px;
}
.btTop {
opacity: 0.5;
position: fixed;
bottom: -48px;
right: 32px;
width: 48px;
height: 48px;
border-radius: 50%;
background: #7f7f7f;
cursor: pointer;
transition: all 0.4s ease;
}
.btTop.on {
bottom: 56px;
}
.btTop:hover {
opacity: 1;
}
.btTop:after {
content: '';
position: absolute;
top: 18px;
left: 14px;
width: 16px;
height: 16px;
border-top: 4px solid #fff;
border-left: 4px solid #fff;
-webkit-transform: rotate(45deg);
-webkit-transform-origin: center;
transform: rotate(45deg);
transform-origin: center;
}
.switchImg img {
display: none;
}
.switchImg img:nth-child(1) {
display: inline;
}
@media (max-width: 767px) {
body {
font-size: 14px;
}
.layout {
padding: 0 16px;
}
.btTop {
right: 8px;
width: 32px;
height: 32px;
}
.btTop.on {
bottom: 16px;
}
.btTop:after {
top: 12px;
left: 11px;
width: 8px;
height: 8px;
}
.btTop:hover {
opacity: 0.5;
}
.switchImg img:nth-child(1) {
display: none;
}
.switchImg img:nth-child(2) {
display: inline;
}
}


/*------------------------ header */
#header {
position: relative;
}
#header:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -24px;
border: 24px solid transparent;
border-top-color: #ffeb3b;
}
#header .topBlock {
height: 48px;
background: #fff;
}
#header .topBlock .kokoro {
padding-top: 14px;
line-height: 1;
}
#header .topBlock .logo {
display: inline-block;
width: 107px;
vertical-align: top;
}
#header .topBlock .copy {
display: inline-block;
margin-left: 10px;
font-size: 12px;
line-height: 22px;
}
#header .topBlock .ministry {
position: absolute;
top: 5px;
right: 32px;
width: 112px;
}
#header .heroBlock {
padding: 24px 0 16px;
background: #ffeb3b;
font-size: 16px;
font-weight: 700;
text-align: center;
}
#header .heroBlock .title {
display: inline-block;
max-width: 544px;
margin-bottom: 8px;
}
.btnNav {
position: absolute;
top: 0;
right: 32px;
width: 56px;
height: 56px;
border-radius: 4px;
background: #fff;
cursor: pointer;
transition: opacity 0.4s ease;
}
.btnNav:hover {
opacity: 0.6;
}
.btnNav span {
position: absolute;
top: 50%;
left: 50%;
width: 32px;
height: 2px;
margin: -1px 0 0 -16px;
background: #212121;
transition: all 0.4s ease;
}
.btnNav span:first-child {
margin-top: -11px;
}
.btnNav span:last-child {
margin-top: 9px;
}
@media (max-width: 767px) {
#header {
position: relative;
}
#header:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -20px;
border: 20px solid transparent;
border-top-color: #ffeb3b;
}
#header .topBlock {
height: 30px;
line-height: 30px;
}
#header .topBlock .kokoro {
padding-top: 8px;
}
#header .topBlock .logo {
display: inline-block;
width: 70px;
vertical-align: top;
}
#header .topBlock .copy {
display: none;
}
#header .topBlock .ministry {
top: -2px;
right: 16px;
width: 72px;
}
#header .heroBlock {
padding: 12px 0;
text-align: left;
}
#header .heroBlock .title {
width: 212px;
margin: 0;
}
#header .heroBlock .copy {
display: none;
}
.btnNav {
top: 2px;
right: 16px;
width: 39px;
height: 39px;
}
.btnNav span {
width: 22px;
margin: -1px 0 0 -11px;
}
.btnNav span:first-child {
margin-top: -9px;
}
.btnNav span:last-child {
margin-top: 7px;
}
}



/*------------------------ psHeader */
.psHeader {
position: relative;
padding: 16px 0;
background: #ffeb3b;
text-align: center;
}
.psHeader.sub {
position: fixed;
z-index: 1000;
top: -160px;
width: 100%;
transition: top 0.4s ease;
}
.psHeader.sub.on {
top: 0;
}
.psHeader:after {
content: '';
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -24px;
border: 24px solid transparent;
border-top-color: #ffeb3b;
}
.psHeader .logo01 {
display: inline-block;
max-width: 384px;
}
.psHeader .logo02 {
position: absolute;
top: 0;
left: 32px;
font-size: 12px;
font-weight: 700;
}
@media (max-width: 900px) {
.psHeader .logo02 {
display: none;
}
}
@media (max-width: 767px) {
.psHeader {
padding: 12px 0;
text-align: left;
}
.psHeader:after {
margin-left: -20px;
border: 20px solid transparent;
border-top-color: #ffeb3b;
}
.psHeader .logo02 {
display: none;
}
.psHeader .logo01 {
width: 212px;
margin: 0;
}
}



/*------------------------ nav */
#wrap {
position: relative;
}
#nav {
display: none;
position: fixed;
z-index: 2000;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#nav .over {
opacity: 0.4;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
}
#nav .block {
overflow: auto;
position: fixed;
top: 0;
left: 0;
width: 100%;
max-height: 100%;
padding: 36px 0 32px;
background: #fff;
}
#nav h2 {
position: relative;
max-width: 350px;
margin: 0 auto 20px;
background: #ffeb3b;
font-size: 18px;
font-weight: 500;
line-height: 40px;
text-align: center;
}
#nav h2:before {
content: '';
position: absolute;
top: 0;
left: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 7px solid #fff;
}
#nav h2:after {
content: '';
position: absolute;
top: 0;
right: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 7px solid #fff;
}
#nav .itemGroup {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 848px;
margin: 0 auto;
}
#nav .item {
width: 48.11%;
min-height: 136px;
padding: 8px 0;
border-bottom: 1px solid #ddd;
}
#nav .item a {
display: table;
position: relative;
width: 100%;
}
#nav .item a:after {
content: '';
position: absolute;
top: 50%;
right: 8px;
width: 8px;
height: 8px;
border-top: 2px solid #212121;
border-right: 2px solid #212121;
-webkit-transform: translateY(-50%) rotate(45deg);
transform: translateY(-50%) rotate(45deg);
}
#nav .item:nth-child(1), 
#nav .item:nth-child(2) {
padding-top: 8px;
border-top: 1px solid #ddd;
}
#nav .item .img {
display: table-cell;
width: 150px;
padding-right: 32px;
vertical-align: top;
}
#nav .item .img img {
width: 100%;
}
#nav .item .body {
display: table-cell;
padding-top: 8px;
vertical-align: top;
}
#nav .item .pro {
display: inline-block;
margin-bottom: 8px;
padding: 0 8px;
background: #ffeb3b;
font-size: 13px;
font-weight: 500;
line-height: 26px;
}
#nav .item .name {
font-size: 28px;
line-height: 1.3;
}
#nav .item .en {
font-size: 12px;
font-weight: 500;
line-height: 1.3;
}
#nav .subNav {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 848px;
margin: 0 auto;
}
#nav .subNav li {
width: 48.11%;
font-weight: 500;
border-bottom: 1px solid #ddd;	
}
#nav .subNav a {
display: block;
position: relative;
padding: 16px;
}
#nav .subNav a:after {
content: '';
position: absolute;
top: 50%;
right: 8px;
width: 8px;
height: 8px;
border-top: 2px solid #212121;
border-right: 2px solid #212121;
-webkit-transform: translateY(-50%) rotate(45deg);
transform: translateY(-50%) rotate(45deg);
}
#nav .social {
padding: 32px 0 8px;
text-align: center;
}
#nav .social .h {
margin-bottom: 16px;
font-size: 16px;
}
#nav .social ul  {
font-size: 0;
}
#nav .social li  {
display: inline-block;
margin: 0 12px;
width: 42px;
}
#nav .btnClose {
position: absolute;
top: -16px;
right: 32px;
width: 56px;
height: 56px;
border-radius: 4px;
background: #212121;
cursor: pointer;
transition: opacity 0.4s ease;
}
#nav .btnClose:hover {
opacity: 0.6;
}
#nav .btnClose span {
position: absolute;
top: 50%;
left: 50%;
width: 32px;
height: 32px;
margin: -16px 0 0 -16px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav .btnClose span:before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2px;
margin-top: -1px;
background: #fff;
}
#nav .btnClose span:after {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 2px;
height: 100%;
margin-left: -1px;
background: #fff;
}
#nav .itemGroup.imgTit{
margin-bottom:35px;
}
#nav .itemGroup.imgTit img{
width: 100%;
}
#nav .itemGroup.new a {
	display: block;
	position: relative;
}
#nav .itemGroup.new a::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 10%;
	padding-top: 10%;
	background: url("/ps/img/common/img_new.png") no-repeat;
	background-size: cover;
}
@media (max-width: 767px) {
#nav .block {
padding-top: 64px;
}
#nav h2 {
width: auto;
padding: 0 24px;
font-size: 16px;
line-height: 36px;
}
#nav h2:before {
border-top-width: 18px;
border-bottom-width: 18px;
}
#nav h2:after {
border-top-width: 18px;
border-bottom-width: 18px;
}
#nav .social {
padding-top: 20px;
}
#nav .social .h {
font-size: 14px;
}
#nav .btnClose {
top: -50px;
right: 16px;
width: 39px;
height: 39px;
}
#nav .btnClose span {
width: 22px;
height: 22px;
margin: -11px 0 0 -11px;
}
#nav .item {
width: 100%;
min-height: 96px;
}
#nav .item:nth-child(2) {
border-top: none;
}
#nav .item .img {
width: 136px;
padding-right: 28px;
}
#nav .item .pro {
font-size: 11px;
line-height: 18px;
}
#nav .item .name {
font-size: 22px;
}
#nav .item .en {
font-size: 10px;
}
#nav .subNav li {
width: 100%;
}
#nav .itemGroup.imgTit{
width:100%;
}
#nav .itemGroup.imgTit .img.switchImg,
#nav .itemGroup.imgTit .img.switchImg img{
width:100%;
}
}



/*------------------------ footer */
#footer .bottomBlock {
height: 48px;
background: #fafafa;
}
#footer .bottomBlock .kokoro {
padding-top: 13px;
line-height: 1;
}
#footer .bottomBlock .logo {
display: inline-block;
width: 107px;
vertical-align: top;
}
#footer .bottomBlock .copy {
display: inline-block;
margin-left: 10px;
font-size: 12px;
line-height: 22px;
}
#footer .bottomBlock .ministry {
position: absolute;
top: 8px;
right: 32px;
width: 112px;
}
#footer .copyright {
padding: 0 32px;
font-size: 11px;
text-align: center;
line-height: 44px;
}
@media (max-width: 767px) {
#footer .bottomBlock {
height: 30px;
line-height: 30px;
}
#footer .bottomBlock .kokoro {
padding-top: 8px;
}
#footer .bottomBlock .logo {
display: inline-block;
width: 70px;
vertical-align: top;
}
#footer .bottomBlock .copy {
display: none;
}
#footer .bottomBlock .ministry {
top: 0;
right: 16px;
width: 57px;
}
}
#footer .copyright {
padding: 16px;
font-size: 10px;
line-height: 1.8;
}



/*------------------------ rate */
#footer .rate {
padding: 40px 0 80px
}
.rateArea .h {
margin-bottom: 8px;
font-size: 13px;
}
.rateArea .h .ico {
display: inline-block;
width: 20px;
margin-right: 4px;
}
.rateArea .btGroup {
overflow: hidden;
display: table;
width: 100%;
border-radius: 4px;
background: #f5f5f5;
}
.rateArea .btGroup .rateBtn {
display: table-cell;
width: 25%;
box-sizing: border-box;
border-left: 1px solid #e0e0e0;
color: #666;
font-size: 14px;
text-align: center;
line-height: 40px;
cursor: pointer;
transition: all 0.4s ease;
}
.rateArea .btGroup .rateBtn:first-child {
border-left: none;
}
.rateArea .btGroup .rateBtn:hover {
opacity: 0.6;
}
#rate {
position: relative;
}
#rate .popup {
display: none;
position: absolute;
bottom: 64px;
left: 12%;
width: 76%;
padding: 24px 32px 32px 32px;
box-sizing: border-box;
border-radius: 8px;
background: #f5f5f5;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
#rate .rate-head {
margin-bottom: 16px;
font-family: "新丸ゴ M", "新丸ゴ R", sans-serif;
font-size: 24px;
}
#rate .rate-head {
margin-bottom: 16px;
font-family: "新丸ゴ M", "新丸ゴ R", sans-serif;
font-size: 24px;
}
#rate textarea {
width: 100%;
height: 118px;
margin: 8px 0 24px 0;
padding: 8px;
box-sizing: border-box;
border-radius: 4px;
border: 1px solid #ccc;
}
#rate .bt {
text-align: center;
}
#rate .bt a {
display: inline-block;
width: 240px;
border-radius: 20px;
background: #ff8080;
color: #fff;
font-family: "新丸ゴ R", sans-serif;
font-size: 16px;
line-height: 40px;
}
#rate .close {
position: absolute;
top: 16px;
right: 16px;
}
#rate .close a {
display: block;
position: relative;
width: 34px;
height: 34px;
-webkit-transform: rotate(45deg);
-webkit-transform-origin: center;
transform: rotate(45deg);
transform-origin: center;
}
#rate .close a:before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 2px;
height: 100%;
margin-left: -1px;
background: #ff8080;
}
#rate .close a:after {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2px;
margin-top: -1px;
background: #ff8080;
}

@media (max-width: 767px) {
#footer .rate {
padding: 40px 0px
}
.rateArea .h {
font-size: 12px;
}
.rateArea .btGroup {
border: 1px solid #e0e0e0;
}
.rateArea .btGroup .rateBtn {
display: block;
width: auto;
border-left: none;
border-top: 1px solid #e0e0e0;
font-size: 13px;
line-height: 34px;
}
.rateArea .btGroup .rateBtn:first-child {
border: none;
}
#rate .popup {
bottom: 0;
left: 0;
width: 100%;
padding: 16px;
}
#rate .rate-head {
margin-bottom: 8px;
font-size: 16px;
}
#rate textarea {
height: 80px;
}
#rate .bt {
text-align: center;
}
#rate .bt a {
width: auto;
padding: 0 24px;
font-size: 14px;
}
#rate .close a {
width: 24px;
height: 24px;
}
}



/*------------------------ topAbout */
.topAbout {
padding: 54px 0;
background: #f5f5f5;
}
.topAbout h2 {
margin-bottom: 24px;
text-align: center;
}
.topAbout .group {
display: table;
width: 100%;
}
.topAbout .img {
display: table-cell;
width: 252px;
padding-right: 32px;
text-align: center;
vertical-align: top;
}
.topAbout .img img {
width: 100%;
}
.topAbout .body {
display: table-cell;
vertical-align: top;
}
.topAbout .body h3{
margin:25px 0 7px 0;
font-weight:700;
color:#fff;
text-align:left;
}
.topAbout .body h3 span{
position:relative;
display:inline-block;
width:200px;
padding:6px 10px;
background:#212121;
box-sizing:border-box;
font-size: 14px;
}
.topAbout .body h3 em{
margin-right:5px;
color:#ffeb3b;
font-style:normal;
}
.topAbout .body h3 span:after {
content: '';
position: absolute;
top: 0;
right: 0;
border-top: 16px solid transparent;
border-bottom:16px solid transparent;
border-right: 7px solid #f5f5f5;
}

@media (max-width: 767px) {
.topAbout {
padding: 28px 0;
}
.topAbout h2 {
margin-bottom: 24px;
}
.topAbout .img {
display: block;
width: auto;
margin-bottom: 24px;
padding: 0 24px;
}
.topAbout .body {
display: block;
}
}



/*------------------------ shareArea */
.shareArea {
padding: 12px 0;
background: #ffeb3b;
font-size: 14px;
text-align: center;
}
.shareArea .inner {
position: relative;
padding: 24px 96px;
background: #fff;
}
.shareArea .inner .triL {
position: absolute;
top: 0;
left: 0;
height: 100%;
border-top: 0 solid transparent;
border-bottom: 0 solid transparent;
border-left: 64px solid #ffeb3b;
}
.shareArea .inner .triR {
position: absolute;
top: 0;
right: 0;
height: 100%;
border-top: 0 solid transparent;
border-bottom: 0 solid transparent;
border-right: 64px solid #ffeb3b;
}
.shareArea h2 {
display: inline-block;
margin-bottom: 24px;
padding-bottom: 8px;
border-bottom: 4px solid #ffeb3b;
font-size: 20px;
font-weight: 700;
}
.shareArea .share {
margin-bottom: 24px;
}
@media (max-width: 767px) {
.shareArea {
font-size: 13px;
text-align: left;
}
.shareArea .inner {
padding: 0;
background: none;
}
.shareArea .inner .triL, 
.shareArea .inner .triR {
display: none;
}
.shareArea h2 {
margin-bottom: 8px;
font-size: 13px;
text-align: center;
}
.shareArea .share {
position: relative;
height: 60px;
margin-bottom: 12px;
padding: 14px 20px 0;
background: #fff;
text-align: center;
}
.shareArea .share:before {
content: '';
position: absolute;
top: 0;
left: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 10px solid #ffeb3b;
}
.shareArea .share:after {
content: '';
position: absolute;
top: 0;
right: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-right: 10px solid #ffeb3b;
}
}



/*------------------------ topNav */
.topNav {
margin-bottom: 32px;
padding-top: 80px;
}
.topNav.interview{
padding-top: 64px;
} 

.topNav .item {
overflow: hidden;
position: relative;
margin-bottom: 16px;
}
.topNav .item a {
overflow: hidden;
display: block;
position: relative;
}
.topNav .item.new a::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 10%;
	padding-top: 10%;
	background: url("/ps/img/common/img_new.png") no-repeat;
	background-size: cover;
}
.topNav .item .img img {
width: 100%;
}
.topNav .item.coming .img {
opacity: 0.4;
}
.topNav .item .layout {
position: absolute;
top: 0;
left: 50%;
width: 100%;
height: 100%;
transform: translateX(-50%);
}
.topNav .info {
position: absolute;
top: 50%;
left: 32px;
width: 288px;
transform: translateY(-50%);
}
.topNav .info .pro {
position: absolute;
top: -14px;
left: 0;
padding: 0 8px;
background: #ffeb3b;
font-size: 14px;
font-weight: 500;
line-height: 28px;
}
.topNav .info .nameBlock {
padding: 32px 24px 24px;
background: rgba(255, 255, 255, 0.7);	
line-height: 1.3;
}
.topNav .info .name {
font-size: 48px;
}
.topNav .info .en {
font-size: 14px;
font-weight: 500;
}
.topNav .info .copy {
position: relative;
padding: 12px 30px;
background: #ffeb3b;
font-size: 15px;
font-weight: 700;
line-height: 1.46;
}
.topNav .info .copy:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin: -1px 0 0 -24px;
border: 24px solid transparent;
border-top-color: #ffeb3b;
}
.topNav .coming .info .copy {
padding: 0 30px;
background: #212121;
color: #fff;
font-size: 18px;
font-weight: 700;
text-align: center;
line-height: 68px;
}
.topNav .coming .info .copy:after {
border-top-color: #212121;
}
.topNav h2 {
position: relative;
max-width: 350px;
margin:80px auto 30px;
background: #ffeb3b;
font-size: 18px;
font-weight: 500;
line-height: 40px;
text-align: center;
}
.topNav h2:before {
content: '';
position: absolute;
top: 0;
left: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 7px solid #fff;
}
.topNav h2:after {
content: '';
position: absolute;
top: 0;
right: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 7px solid #fff;
}
.topNav .itemGroup {
	margin-bottom: 80px;
}
@media (max-width: 1023px) {
.topNav .info {
width: 190px;
}
.topNav .info .pro {
top: -9px;
font-size: 10px;
line-height: 18px;
}
.topNav .info .nameBlock {
padding: 24px 16px 12px;
}
.topNav .info .name {
font-size: 32px;
}
.topNav .info .en {
font-size: 10px;
}
.topNav .info .copy {
padding: 8px 16px;
font-size: 10px;
}
.topNav .info .copy:after {
border-width: 16px;
margin-left: -16px;
}
.topNav .coming .info .copy {
padding: 0 20px;
font-size: 14px;
line-height: 46px;
}
}
@media (max-width: 767px) {
.topNav {
padding-top: 40px;
}
.topNav.interview{
padding-top: 32px;
} 
.topNav h2{
margin:0 16px 32px;
}
.topNav .item {
margin-bottom: 40px;
}
.topNav .item .layout {
position: static;
transform: none;
width: auto;
height: auto;
}
.topNav .info {
position: relative;
top: 0;
left: 0;
width: auto;
transform: none;
}
.topNav .info .pro {
top: -12px;
font-size: 11px;
line-height: 24px;
}
.topNav .info .name {
font-size: 32px;
}
.topNav .info .en {
font-size: 11px;
}
.topNav .info .copy {
padding: 12px 20px;
font-size: 14px;
}
.topNav .info .coming {
padding: 0 20px;
font-size: 16px;
line-height: 66px;
}
.topNav .itemGroup {
	margin-bottom: 0
}
}



/*------------------------ heroArea */
.heroArea {
overflow: hidden;
position: relative;
}
.heroArea .img img {
width: 100%;
}
.heroArea .layout {
position: absolute;
top: 0;
left: 50%;
width: 100%;
height: 100%;
transform: translateX(-50%);
}
.heroArea .info {
position: absolute;
top: 50%;
left: 32px;
width: 288px;
transform: translateY(-50%);
}
.heroArea .info .pro {
position: absolute;
top: -14px;
left: 0;
padding: 0 8px;
background: #ffeb3b;
font-size: 14px;
font-weight: 500;
line-height: 28px;
}
.heroArea .info .nameBlock {
padding: 32px 24px 24px;
background: rgba(255, 255, 255, 0.7);	
line-height: 1.3;
}
.heroArea .info .name {
font-size: 48px;
line-height: 1.3;
}
.heroArea.ts .info .name {
font-size: 30px;
}
.heroArea .info .en {
font-size: 14px;
font-weight: 500;
}
.heroArea .info .copy {
position: relative;
padding: 12px 30px;
background: #ffeb3b;
font-size: 15px;
font-weight: 700;
line-height: 1.46;
}
.heroArea .info .copy:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin: -1px 0 0 -24px;
border: 24px solid transparent;
border-top-color: #ffeb3b;
}
@media (max-width: 980px) {
.heroArea .info {
width: 190px;
}
.heroArea .info .pro {
top: -9px;
font-size: 10px;
line-height: 18px;
}
.heroArea .info .nameBlock {
padding: 24px 16px 12px;
}
.heroArea .info .name {
font-size: 32px;
}
.heroArea .info .en {
font-size: 10px;
}
.heroArea .info .copy {
padding: 8px 16px;
font-size: 10px;
}
.heroArea .info .copy:after {
border-width: 16px;
margin-left: -16px;
}
}
@media (max-width: 767px) {
.heroArea .layout {
position: static;
transform: none;
width: auto;
height: auto;
}
.heroArea .info {
position: relative;
top: 0;
left: 0;
width: auto;
transform: none;
}
.heroArea .info .pro {
top: -12px;
font-size: 11px;
line-height: 24px;
}
.heroArea .info .nameBlock {
padding: 16px 0 8px;
}
.heroArea .info .name {
font-size: 32px;
}
.heroArea.ts .info .name {
text-align:left;
padding-top:12px;
}
.heroArea .info .en {
font-size: 11px;
}
.heroArea .info .copy {
padding: 12px 20px;
font-size: 14px;
}
}



/*------------------------ shareBlock */
.shareBlock {
padding: 8px 0;
background: #ffeb3b;
}
.shareBlock .inner {
position: relative;
height: 60px;
padding-top: 14px;
background: #fff;
text-align: center;
}
.shareBlock .inner:before {
content: '';
position: absolute;
top: 0;
left: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 10px solid #ffeb3b;
}
.shareBlock .inner:after {
content: '';
position: absolute;
top: 0;
right: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-right: 10px solid #ffeb3b;
}
@media (max-width: 767px) {
.shareBlock {
margin-top: 32px;
}
}


/*------------------------ article */
#article {
padding-top: 64px;
}
#article.ts{
padding-top: 0;
}
.section {
margin-bottom: 64px;
}
.section .layout {
max-width: 992px;
}
.section .head {
position: relative;
}
.section h2 {
position: relative;
margin-bottom: 48px;
padding: 12px 32px 12px 128px;
background: url(../img/common/ico_posishare.png) no-repeat left center #ffeb3b;
background-size: 98px;
font-size: 26px;
font-weight: 500;
}
.section .head .addL {
position: absolute;
bottom: 0;
right: 100%;
height: 100%;
background: #ffeb3b;
}
.section .head .addR {
position: absolute;
bottom: 0;
right: 0;
border-top: 0 solid transparent;
border-bottom: 0 solid transparent;
border-right: 33px solid #fff;
}
.section .img {
margin-bottom: 24px;
}
.section .body h3 {
display: inline-block;
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 4px solid #ffeb3b;
font-size: 20px;
font-weight: 500;
}
.group .section .body p {
margin-bottom: 24px;
}
#article.group .section p {
position: relative;
padding-left: 72px;
}
#article.group .section p .name {
position: absolute;
top: 0;
left: 0;
font-weight: 700;
}
@media (max-width: 767px) {
#article {
padding-top: 32px;
}
#article.ts {
padding-top: 0;
}
.section {
margin-bottom: 32px;
}
.section .head {
padding-top: 36px;
background: url(../img/common/ico_posishare.png) no-repeat center top;
background-size: 98px;
}
.section h2 {
position: relative;
margin-bottom: 20px;
padding: 12px 32px 12px 0;
background: #ffeb3b;
font-size: 18px;
font-weight: 500;
}
.section .head .addL {
height: calc(100% - 36px);
}
.section .img {
margin: 0 -16px 16px;
}
.section .body h3 {
font-size: 18px;
}
#article.group .section p {
padding-left: 0;
}
#article.group .section p .name {
display: block;
position: static;
}
}



/*------------------------ message */
.message {
margin-bottom: 64px;
}
.message.ts{
margin-bottom:0;
padding:50px 0;
background:#f5f5f5;
}
.message .layout {
max-width: 992px;
}
.message h2 {
position: relative;
margin-bottom: 32px;
padding-bottom: 16px;
font-size: 24px;
font-weight: 500;
text-align: center;
}
.message h2:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 158px;
height: 4px;
margin-left: -79px;
background: #ffeb3b;
}
.message.ts h2{
padding:0;
}
.message.ts h2:after {
display:none;
}
.message.ts p{
margin-bottom:35px;
}
.videoArea {
position: relative;
}
.videoArea .thumb {
position: relative;
z-index: 2;
cursor: pointer;
transition: opacity 0.4s ease;
}
.videoArea .thumb.on {
opacity: 0;
position: relative;
z-index: 0;
cursor: pointer;
}
.videoArea .thumb:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin: -60px 0 0 -60px;
background: url(../img/common/ico_video.png);
background-size: cover;
transition: opacity 0.4s ease;
}
.videoArea .thumb:hover:after {
opacity: 0.6;
}
.videoArea .iframe {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.videoArea .iframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media (max-width: 767px) {
.message {
margin-bottom: 36px;
}
.message.ts{
margin-bottom:0;
padding:30px 0;
}
.message h2 {
margin-bottom: 16px;
font-size: 18px;
}
.videoArea .thumb:after {
width: 60px;
height: 60px;
margin: -30px 0 0 -30px;
}
}



/*------------------------ profile */
.profileArea {
padding: 100px 0 136px;
}
.profileArea.ts{
padding-bottom:100px;
}
.profileArea .layout {
max-width: 992px;
}
.profileArea h2 {
margin-bottom: 40px;
text-align: center;
}
.profileArea h2 img {
width: 152px;
}
.profileArea.ts h2 img {
width: 210px;
}
.profileArea .group {
display: table;
width: 100%;
}
.profileArea .group:nth-of-type(2){
margin-top:40px;
}
.profileArea .img {
display: table-cell;
width: 288px;
padding-right: 32px;
vertical-align: top;
}
.profileArea .img img {
width: 100%;
}
.profileArea .body {
display: table-cell;
vertical-align: top;
font-size: 15px;
}
.profileArea .pro {
display: inline-block;
margin-bottom: 8px;
padding: 0 8px;
background: #ffeb3b;
font-size: 14px;
font-weight: 500;
line-height: 28px;
}
.profileArea .name {
margin-bottom: 8px;
font-size: 30px;
}
.profileArea .name .en {
display: inline-block;
margin-left: 16px;
font-size: 14px;
font-weight: 500;
}
.profileArea .social {
padding-top: 16px;
}
.profileArea .social li {
display: inline-block;
margin: 0 16px 8px 0;
color: #ff8080;
}
.profileArea .social a {
color: #ff8080;
}
.profileArea .social .ico {
display: inline-block;
width: 20px;
margin-right: 8px;
}
.profileArea .body .h {
padding-top: 16px;
}
@media (max-width: 767px) {
.profileArea {
padding: 40px 0;
}
.profileArea.ts {
padding: 40px 0;
}
.profileArea h2 {
margin-bottom: 16px;
}
.profileArea h2 img {
width: 136px;
}
.profileArea .img {
display: block;
width: auto;
margin-bottom: 16px;
padding: 0 45px;
}
.profileArea .body {
display: block;
position: relative;
font-size: 12px;
}
.profileArea .pro {
position: absolute;
top: -27px;
font-size: 11px;
line-height: 22px;
}
.profileArea .name {
font-size: 22px;
}
.profileArea .name .en {
font-size: 11px;
}
}


/*------------------------ supervision */
.supervision {
margin-bottom: 56px;
}
.supervision .layout {
max-width: 992px;
}
.supervision .h {
margin-bottom: 24px;
font-weight: bold;
}
.supervision .item {
position: relative;
float: left;
width: 48.27%;
min-height: 136px;
margin-left: 3.22%;
}
.supervision .item:nth-child(odd) {
margin-left: 0;
}
.supervision .img {
float: left;
width: 96px;
}
.supervision .body {
padding-left: 128px;
font-size: 14px;
line-height: 1.57;
}
.supervision .name {
margin-bottom: 16px;
font-size: 22px;
}
.supervision .name .en {
display: inline-block;
margin-left: 16px;
font-size: 16px;
}
.supervision .blank::after {
content: '';
display: inline-block;
width: 15px;
height: 15px;
margin-left: 8px;
background: url(../img/ico_blank.png);
background-size: contain;
}
.reference {
font-size: 14px;
margin-top: 16px;
}

.reference .blank::after {
content: '';
font-size: 16px;
display: inline-block;
width: 15px;
height: 15px;
margin-left: 8px;
background: url(../img/ico_blank.png);
background-size: contain;
}

@media (max-width: 1023px) {
.supervision .item {
float: none;
width: auto;
margin: 0 0 32px;
}
}
@media (max-width: 767px) {
.supervision {
margin-bottom: 0;
}
.supervision .h {
margin-bottom: 16px;
}
.supervision .item {
min-height: 102px;
}
.supervision .img {
width: 72px;
}
.supervision .body {
padding-left: 96px;
font-size: 12px;
}
.supervision .name {
margin-bottom: 16px;
font-size: 16px;
}
.supervision .name .en {
font-size: 12px;
}
.supervision .blank::after {
width: 12px;
height: 12px;
}
}



/*------------------------ supervision */
.photography {
margin-bottom: 56px;
}
.photography .layout {
max-width: 992px;
}
.photography .h {
margin-bottom: 24px;
font-weight: bold;
}
.photography .item {
position: relative;
float: left;
width: 48.27%;
min-height: 136px;
margin-left: 3.22%;
}
.photography .item:nth-child(odd) {
margin-left: 0;
}
.photography .img {
position: absolute;
top: 0;
right: 0;
width: 160px;
}
.photography .body {
padding-right: 192px;
font-size: 14px;
line-height: 1.57;
}
.photography .logo {
margin-bottom: 24px;
}
.photography .blank::after {
content: '';
display: inline-block;
width: 15px;
height: 15px;
margin-left: 8px;
background: url(../img/ico_blank.png);
background-size: contain;
}
@media (max-width: 767px) {
.photography .item {
	float: none;
	width: auto;
	min-height: 0;
}
.photography .body {
	margin-bottom: 16px;
	padding-right: 0;
	font-size: 12px;
}
.photography .logo {
width: 192px;
margin-bottom: 16px;
}
.photography .img {
	position: static;
	width: 120px;
}
}

/*------------------------ announceArea */
.announceArea .logoBlock {
position: relative;
padding: 20px 0;
background: #ffeb3b;
text-align: center;
font-weight: 700;
}
.announceArea .logoBlock:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -24px;
border: 24px solid transparent;
border-top-color: #ffeb3b;
}
.announceArea .logoBlock .logo {
display: inline-block;
max-width: 384px;
margin-bottom: 8px;
}
.announceArea .txtBlock {
padding: 32px 0 24px;
background: #f5f5f5;
font-size: 14px;
font-weight: 500;
text-align: center;
}
@media (max-width: 767px) {
.announceArea .logoBlock {
font-size: 13px;
}
.announceArea .logoBlock:after {
margin-left: -20px;
border-width: 20px;
}
.announceArea .txtBlock {
font-size: 13px;
text-align: left;
}
}


/*------------------------ aboutKokoro */
.aboutHero {
padding: 50px 0 32px;
background: #fcfbf6;
text-align: center;
}
.aboutKokoro {
padding: 56px 0;
}
.aboutKokoro .block {
max-width: 608px;
margin: 0 auto 56px;
}
.aboutKokoro h2 {
position: relative;
margin-bottom: 16px;
padding-bottom: 16px;
font-size: 24px;
font-weight: 500;
text-align: center;
}
.aboutKokoro h2:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 158px;
height: 4px;
margin-left: -79px;
background: #ffeb3b;
}
.aboutKokoro .group {
display: flex;
max-width: 928px;
margin: 0 auto 56px;
border-left: 1px solid #ddd;
}
.aboutKokoro .column {
width: 33%;
padding: 0 38px;
border-right: 1px solid #ddd;
font-size: 15px;
}
.aboutKokoro .column .img {
width: 96px;
margin: 0 auto 16px auto;
}
.aboutKokoro .column .h {
margin-bottom: 16px;
font-size: 28px;
text-align: center;
}
.aboutKokoro .btnKokoro {
text-align: center;
}
.aboutKokoro .btnKokoro a {
display: inline-block;
padding: 0 48px;
border-radius: 24px;
background: #ff8080;
color: #fff;
font-family: "新丸ゴ R", sans-serif;
font-size: 18px;
line-height: 48px;
}
@media (max-width: 767px) {
.aboutKokoro {
padding: 40px 0;
}
.aboutKokoro h2 {
font-size: 18px;
}
.aboutKokoro .group {
display: block;
border: none;
}
.aboutKokoro .column {
width: auto;
margin-bottom: 24px;
padding: 0 0 24px;
border: none;
border-bottom: 1px solid #ddd;
}
.aboutKokoro .column .h {
font-size: 20px;
}
}


/*------------------------ general */
.pt0 {
padding-top: 0 !important;
}


/*------------------------ titArea */
.titArea {
margin-bottom:48px;
padding: 12px 0;
background: #ffeb3b;
font-size: 14px;
text-align: center;
}
.titArea .inner {
position: relative;
padding: 24px 96px;
background: #fff;
}
.titArea .inner .imgL{
position:absolute;
top: 50%;
left: 11.43%;
margin-top:-81px;
}
.titArea .inner .imgR{
position:absolute;
top: 50%;
right:11.43%;
margin-top:-81px;
}
.titArea .inner .triL {
position: absolute;
top: 0;
left: 0;
height: 100%;
border-top: 0 solid transparent;
border-bottom: 0 solid transparent;
border-left: 64px solid #ffeb3b;
}
.titArea .inner .triR {
position: absolute;
top: 0;
right: 0;
height: 100%;
border-top: 0 solid transparent;
border-bottom: 0 solid transparent;
border-right: 64px solid #ffeb3b;
}
.titArea h2 {
display: inline-block;
margin-bottom: 24px;
padding-bottom: 8px;
border-bottom: 4px solid #ffeb3b;
font-size: 20px;
font-weight: 700;
}
.titArea p{
margin-bottom:20px;
font-size:16px;
}
.titArea .btn a{
position:relative;
display:inline-block;
width:200px;
height:40px;
background:#ffeb3b;
font-weight:700;
font-size:18px;
line-height:2.1em;
}
.titArea .btn a:after{
position:absolute;
top:50%;
right:10px;
display:block;
margin-top:-6px;
content:"";
width: 8px;
height: 8px;
border-top:2px solid #212121;
border-right: 2px solid #212121;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

@media (max-width: 1040px) {
.titArea .inner .imgL{
left: 7%;
}
.titArea .inner .imgR{
right:7%;
}
}
@media (max-width: 1023px) {
.titArea .inner{
padding: 24px 20px;
}
.titArea .inner .imgL{
position:static;
margin:0 7px;
}
.titArea .inner .imgR{
position:static;
margin:0 7px;
}

.titArea .btn{
padding-top:20px;
}
.titArea .inner .triL, 
.titArea .inner .triR {
display: none;
}
}
@media (max-width: 767px) {
.titArea {
font-size: 13px;
}
.titArea p{
margin-bottom:10px;
font-size: 13px;
}
.titArea .inner {
}
.titArea .inner .triL, 
.titArea .inner .triR {
display: none;
}
.titArea h2 {
margin-bottom: 8px;
font-size: 15px;
text-align: center;
}
.titArea .btn a{
width:160px;
height:auto;
padding:5px;
font-size:15px;
line-height:2.1em;
}
.titArea .btn a:after{
margin-top:-4px;
width: 6px;
height: 6px;
}
.titArea .inner .imgL img,
.titArea .inner .imgR img{
width:30%;
max-width:120px;
height:auto;
}
}


/*------------------------ stretchList */
.section.stretchList .layout{
max-width: 1120px;
}
.stretchList .itemGroup {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 1120px;
margin: 0 auto;
}
.stretchList .item {
width: 48.11%;
}
.stretchList .item a {
display: table;
position: relative;
width: 100%;
}
.stretchList .item img {
width: 100%;
}
.stretchList .item .body {
position: absolute;
top:50%;
left:6%;
width: 256px;
margin-top:-7px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.stretchList .item .body .sub {
position: absolute;
top: -14px;
left: 0;
padding: 0 8px;
background: #ffeb3b;
font-size: 14px;
font-weight: 500;
line-height: 28px;
z-index:10;
}
.stretchList .item .body h2 {
margin-bottom:0;
padding: 36px 20px 23px 18px;
background: rgba(255, 255, 255, 0.7);	
line-height: 1.3;
font-size: 24px;
}
.stretchList .item .body .copy {
position: relative;
padding: 12px 13px 12px 18px;
background: rgba(255,235,59,0.8);
font-size: 15px;
font-weight: 700;
line-height: 1.46;
}
.stretchList .item .body .copy:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin: 0 0 0 -24px;
border: 24px solid transparent;
border-top-color: rgba(255,235,59,0.8);
}
@media (max-width: 890px) {
.stretchList .item .body .copy:after {
display:none;
}
}
@media (max-width: 767px) {
.stretchList .item {
width: 100%;
margin-bottom:40px;
}
.stretchList .item:last-of-type {
margin-bottom:0;
}
.stretchList .img{
margin-bottom:0;
}
.stretchList .item .img img{
width:100%;
}
.stretchList .item .body {
position: relative;
top: 0;
left: 0;
width: auto;
width:100%;
margin:0;
transform: none;
}
.stretchList .item .body .sub {
top: -12px;
font-size: 11px;
line-height: 24px;
}
.stretchList .item .body h2{
padding:20px 0 10px;
font-size: 32px;
}
.stretchList .item .body .copy {
padding: 12px 20px;
font-size: 14px;
}
.stretchList .item .body .copy:after {
display:none;
}
}


/*------------------------ scene*/
.scene{
padding:30px 0;
padding-bottom:20px;
background:#f5f5f5;
text-align:center;
}
.scene h2{
display: inline-block;
margin-bottom: 24px;
padding-bottom: 8px;
border-bottom: 4px solid #ffeb3b;
font-size: 20px;
font-weight: 700;
}
.scene p{
margin-bottom:20px;
}
.scene li{
display:inline-block;
margin:0 10px 10px 10px;
padding:8px 15px;
background:#fff;
border:2px solid #ffeb3b;
font-weight:700;
}
@media (max-width: 767px) {
.scene{
padding:20px 16px;
padding-bottom:15px;
}
.scene h2{
font-size: 15px;
margin-bottom: 20px;
}
.scene p{
font-size:13px;
text-align:left;
}
.scene ul{
text-align:left;
}
.scene li{
margin:0 8px 7px 0;
padding:5px 10px;
font-size:12px;
}
}

/*------------------------ stretch detail page*/
.tsdetail{
font-size:18px;
font-weight:500;
}
.tsdetail p{
font-weight:normal;
}
.red{
color:#ff0000;
}
.tsdetail ul.disc.mb{
padding-bottom:45px;
}
.tsdetail ul.disc li{
position:relative;
padding-left:30px;
}
.tsdetail ul.disc li:before{
position:absolute;
top:.7em;
left:0;
content:"";
width:14px;
height:14px;
margin:0 18px 0 0;
background:#ffeb3b;
}
.tsdetail ul.tsFlow{
padding-bottom:45px;
}
.tsdetail ul.tsFlow li {
display:table;
}
.tsdetail ul.tsFlow li div{
display:table-cell;
padding-bottom:15px;
vertical-align:top;
}
.tsdetail ul.tsFlow li div.num{
padding-right:17px;
}
.tsdetail ul.tsFlow li div.num span{
display:inline-block;
width:40px;
height:40px;
background:#ffeb3b;
text-align:center;
line-height:2;
}
.tsdetail.section .body h3 span{
position:relative;
display:inline-block;
margin-right:17px;
padding:7px 20px;
height:32px;
background:#ffeb3b;
line-height:16px;
}
.tsdetail.section .body h3 br{
display:none;
}
.tsdetail.section .body h3 span:before{
display:block;
content:"";
position: absolute;
bottom: 0;
left: 0;
border-top: 16px solid transparent;
border-bottom: 16px solid transparent;
border-left: 6px solid #fff;
}
.tsdetail.section .body h3 span:after{
display:block;
content:"";
position: absolute;
bottom: 0;
right: 0;
border-top: 16px solid transparent;
border-bottom: 16px solid transparent;
border-right: 6px solid #fff;
}
.tsdetail.section .img{
margin-bottom:0;
}
.tsdetail .tsFlowPic .flow{
padding-bottom:64px;
}
.tsdetail .tsFlowPic .flow:last-of-type{
padding-bottom:0;
}
.tsdetail.section .caption{
display:table;
}
.tsdetail.section .caption .num{
display:table-cell;
}
.tsdetail.section .caption .text{
display:table-cell;
padding-left:15px;
font-weight:500;
}
.tsdetail.section .caption .num span{
display:inline-block;
width:40px;
height:40px;
background:#ffeb3b;
text-align:center;
line-height:2;
}
.tsdetail.section .flow.icon .caption .num span{
width:14px;
height:14px;
}
.tsdetail.section .point{
display:table;
width:100%;
margin-top:15px;
}
.tsdetail.section .point.ex {
margin-bottom: 32px;
}
.tsdetail.section .point .tit{
position: relative;
display:table-cell;
width:193px;
padding:5px 0;
background:#212121;
color:#fff;
font-size:14px;
text-align:center;
vertical-align:middle;
}
.tsdetail.section .point .arrow{
display:block;
content:"";
position: absolute;
top:0;
right: 0;
width:8px;
height: 0;
border:18px solid transparent;
border-right: 8px solid #ffeb3b;
}
.tsdetail.section .point .body{
display:table-cell;
padding:5px 15px 5px 18px;
background:#ffeb3b;
font-size:16px;
font-weight:normal;
vertical-align:middle;
line-height:1.5;
}
.tsdetail.section p.para{
font-size:16px;
}
@media (max-width: 767px) {
.tsdetail{
font-size:14px;
}
.tsdetail ul.disc.mb{
padding-bottom:25px;
}
.tsdetail ul.disc li:before{
top:0.5em;
}
.tsdetail ul.tsFlow{
padding-bottom:25px;
}
.tsdetail ul.tsFlow li div.num{
padding-right:12px;
}
.tsdetail.section .caption .text{
padding-left:12px;
}
.tsdetail ul.tsFlow li div.num span,
.tsdetail.section .caption .num span{
width:30px;
height:30px;
}
.tsdetail.section .flow.icon .caption .num span{
vertical-align:-2px;
}
.tsdetail.section .body h3 br{
display:block;
}
.tsdetail.section .body h3 span{
margin-bottom:10px;
}
.tsdetail .tsFlowPic .flow{
padding-bottom:30px;
}

.tsdetail.section .point{
display:block;
}
.tsdetail.section .point .tit{
display:inline-block;
width:auto;
padding:4px 10px;
font-size:13px;
}
.tsdetail.section .point .arrow{
display:none;
}
.tsdetail.section .point .body{
display:block;
padding:5px 10px;
font-size:14px;
}
.tsdetail.section p.para{
font-size:14px;
}
}
/*------------------------ stretch checkBoxArea*/
.checkBoxArea{
font-size:18px;
}
.checkBoxArea h2{
padding:18px 0 15px 0;
background:#ffeb3b;
font-weight:500;
text-align:center;
}
 .checkBoxArea .body{
padding-bottom:45px;
background:#f5f5f5;
}
.checkBoxArea ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 848px;
margin: 0 auto;
}
.checkBoxArea ul.menu01{
margin-bottom:25px;
}
.checkBoxArea li {
width: 48.11%;
font-weight: 500;
border-bottom: 1px solid #ddd;	
}
.checkBoxArea .menu01 li span{
position:relative;
display:inline-block;
width:20px;
height: 20px;
margin-right:15px;
background:#fff;
border:2px solid #212121;
vertical-align:middle;
}
.checkBoxArea .menu01 li.read span{
background:#ffeb3b;
}
.checkBoxArea .menu01 li.read span:after{
content: "";
display: block;
position: absolute;
top: 0;
left: 50%;
width: 4px;
height: 10px;
margin-left:-4px;
transform: rotate(40deg);
border-bottom: 3px solid #212121;
border-right: 3px solid #212121
}

.checkBoxArea .menu01 li a.active,
.checkBoxArea .menu02 li a.active{
color:#757575;
}
.checkBoxArea .menu02 li{
border-top: 1px solid #ddd;	
}
.checkBoxArea a {
display: block;
position: relative;
padding: 16px;
}
.checkBoxArea a:after {
content: '';
position: absolute;
top: 50%;
right: 8px;
width: 8px;
height: 8px;
border-top: 2px solid #212121;
border-right: 2px solid #212121;
-webkit-transform: translateY(-50%) rotate(45deg);
transform: translateY(-50%) rotate(45deg);
}
@media (max-width: 767px) {
.checkBoxArea{
font-size:16px;
}
.checkBoxArea li {
width: 100%;
}
.checkBoxArea .menu02 li{
border-top: none;	
}
.checkBoxArea .menu02{
border-top: 1px solid #ddd;	
}
}

/*------------------------ tokyo stretch effect  heroArea*/
.heroArea.tseffect .kimoto{
position:absolute;
left:9%;
top:50%;
transform: translateY(-50%);
}
.heroArea.tseffect .suzuki{
position:absolute;
right:9%;
top:50%;
transform: translateY(-50%);
}
.heroArea.tseffect .kimoto img,
.heroArea.tseffect .suzuki img{
width:184px;
}
.heroArea.tseffect .body{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
text-align:center;
width:100%;
}
.heroArea.tseffect .name{
display:inline-block;
margin-bottom:25px;
padding-bottom:15px;
font-size:24px;
font-weight:500;
border-bottom:6px solid #ffeb3b;
}
.heroArea.tseffect .name.sp{
display:none;
}
.heroArea.tseffect .body .copy{
font-size:18px;
}
@media (max-width: 1120px) {
.heroArea.tseffect .kimoto{
left:5%;
}
.heroArea.tseffect .suzuki{
right:5%;
}
.heroArea.tseffect .kimoto img,
.heroArea.tseffect .suzuki img{
width:150px;
}
.heroArea.tseffect .body .name{
margin-bottom:15px;
padding-bottom:10px;
font-size:24px;
}
.heroArea.tseffect .body .copy{
font-size:16px;
}
}
@media (max-width: 910px) {
.heroArea.tseffect .kimoto img,
.heroArea.tseffect .suzuki img{
width:130px;
}
.heroArea.tseffect .body .name{
font-size:20px;
margin-bottom:10px;
}
.heroArea.tseffect .body .copy{
font-size:14px;
}
}
@media (max-width: 767px) {
.heroArea.tseffect .kimoto{
display:none;
}
.heroArea.tseffect .suzuki{
display:none;
}
.heroArea.tseffect .body{
position:static;
transform:none;
}
.heroArea.tseffect .name.sp{
display:inline-block;
white-space:nowrap;
position:absolute;
top:10%;
left:50%;
transform: translateX(-50%);
margin-bottom:0;
padding-bottom:10px;
text-align:center;
font-size:16px;
line-height:1.6;
}
.heroArea.tseffect .body .name{
display:none;
}
.heroArea.tseffect .body .copy{
margin-top:10px;
}
.shareBlock.effect{
margin-top:10px;
}
}

/*------------------------ tsEffectBody */
.tsEffectBody{
padding-bottom:10px;
}
.tsEffectBody .talk img{
min-width:120px;
}
.tsEffectBody .talk{
display:table;
margin-bottom:32px;
}
.tsEffectBody .talk .pict{
display:table-cell;
width:120px;
vertical-align:middle;
}
.tsEffectBody .talk .pict img{
width: 100%;
}
.tsEffectBody .talk .text{
display:table-cell;
padding-left:49px;
vertical-align:middle;
}
.tsEffectBody .talk .text span{
position:relative;
display:block;
padding:15px;
width:480px;
border:3px solid #ffeb3b;
background:#fffde7;
border-radius:4px;
}
.tsEffectBody .talk .text span:before{
position:absolute;
display:block;
top:50%;
left:-16px;
margin-top:-11px;
content: url(../img/tokyo_stretch_effect/arrow01.png);
}
.tsEffectBody .talk:nth-of-type(2n) .text span:before{
display:none;
}
.tsEffectBody .talk:nth-of-type(2n) .text span:after{
position:absolute;
display:block;
top:50%;
right:-16px;
margin-top:-11px;
content: url(../img/tokyo_stretch_effect/arrow02.png);
}
.tsEffectBody .talk:nth-of-type(2n) {
float:right;
}
.tsEffectBody .talk:nth-of-type(2n+1){
clear:both;
}
.tsEffectBody .talk:nth-of-type(2n) .text{
padding-left:0;
padding-right:49px;
}
.tsEffectBody .talk:nth-of-type(2n) .text span{
border-color:#ffc107;
background:#fff8e1;
}

@media (max-width: 767px) {
.tsEffectBody .talk{
margin-bottom:24px;
}
.tsEffectBody .talk .text{
padding-left:23px;
}
.tsEffectBody .talk:nth-of-type(2n) .text{
padding-right:23px;
}
.tsEffectBody .talk .text span{
width:100%;
line-height:1.5;
}
.tsEffectBody .talk:nth-of-type(2n) .text span{
width:100%;
}
.tsEffectBody .talk .pict{
width:18.75%;
}
.tsEffectBody .talk .pict img{
min-width:100%;
width:100%;
}
}

/*------------------------ tsAsthenopia */
.tsAsthenopia {
	margin-top: 32px;
}
.tsAsthenopia .type {
	float: left;
	width: 48.27%;
}
.tsAsthenopia .q {
	position: relative;
	padding: 16px;
	border: 1px solid #ddd;
	color: #ff4081;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}
.tsAsthenopia .a {
	position: relative;
	font-size: 20px;
	padding: 69px 0 8px;
	border-bottom: 4px solid #ff4081;
}
.tsAsthenopia .a::after {
	content: '▼';
	position: absolute;
	left: 0;
	top: 16px;
	width: 100%;
	color: #ff4081;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
}
.tsAsthenopia .a .tag {
	display: inline-block;
	position: relative;
	margin-right: 20px;
	padding: 0 20px;
	background: #ff4081;
	color: #fff;
	font-size: 18px;
	line-height: 32px;
}
.tsAsthenopia .a .tag::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	border: 15px solid transparent;
	border-left: 6px solid #fff;
}
.tsAsthenopia .a .tag::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	border: 15px solid transparent;
	border-right: 6px solid #fff;
}
.tsAsthenopia .type:last-child {
	float: right;
}
.tsAsthenopia .type:last-child .q {
	color: #1565c0;
}
.tsAsthenopia .type:last-child .a {
	border-color: #1565c0;
}
.tsAsthenopia .type:last-child .a::after {
	color: #1565c0;
}
.tsAsthenopia .type:last-child .a .tag {
	background: #1565c0;
}
@media (max-width: 1023px) {
.tsAsthenopia .type {
	float: none !important;
	width: auto;
	margin-bottom: 40px;
}
}
@media (max-width: 767px) {
.tsAsthenopia .q {
	padding: 8px;
	font-size: 14px;
}
.tsAsthenopia .a {
	padding-top: 48px;
	font-size: 16px;
}
.tsAsthenopia .a::after {
	top: 8px;
}
.tsAsthenopia .a .tag {
	margin-right: 16px;
	padding: 0 16px;
	font-size: 14px;
}
}