@charset "utf-8";

/******************************************************************************

frame

******************************************************************************/
.l-inner {
 clear:both;
 margin:0 auto;
 padding: 0 10px;
 max-width:1650px;
 height:auto;
 box-sizing: border-box;
}
@media screen and (min-width: 1400px) {
 .l-inner {
  padding: 0 7%;
 }
}
@media screen and (max-width: 1070px) {
 .l-inner {
  padding: 0 4%;
 }
}

/******************************************************************************

compornent

******************************************************************************/
.c-headline_01 {
 font-size: 375%;
 line-height: 1.2em;
}
@media screen and (max-width: 1070px) {
 .c-headline_01 {
  font-size: 300%;
 }
}
.c-headline_02 {
 font-size: 200%;
 line-height: 1.2em;
 margin-bottom: 0.5em;
}
.c-headline_03 {
 font-size: 150%;
 line-height: 1.2em;
 margin-bottom: 0.5em;
}
.c-headline_04 {
 font-size: 175%;
 line-height: 1.4em;
 margin-bottom: 0.5em;
}
.c-headline_05 {
 font-size: 125%;
 line-height: 1.4em;
 margin-bottom: 0.5em;
}
.c-headline_06 {
 font-size: 137.5%;
 line-height: 1.5em;
}
/*
 text
******************************************/
.c-text_01 {
 font-size: 112.5%;
 line-height: 1.75em;
}
.c-text_02 {
 font-size: 100%;
 line-height: 1.75em;
}
.c-text_03 {
 font-size: 87.5%;
 line-height: 1.75em;
}
.c-text_04 {
 font-size: 150%;
 line-height: 1.75em;
}
.c-text_05 {
 font-size: 125%;
 line-height: 1.75em;
}
.c-text_06 {
 font-size: 225%;
 line-height: 1.5em;
}
.c-text_07 {
 font-size: 175%;
 line-height: 1.5em;
}

.c-textBlock p {
 margin-bottom: 1em;
}

.blue {
 color: #00b0f4;
}
.gray {
 color: #999;
}

/******************************************************************************

project

******************************************************************************/
.p-firstview {
 position: relative;
}
.p-firstview__content {
 width: 100%;
 position: absolute;
 bottom: 1.5em;
 left:4%;
 z-index: 2;
 color: #000;
 text-shadow: 
  0 0 10px rgba(255,255,255,0.8),
  0 0 10px rgba(255,255,255,0.8),
  0 0 10px rgba(255,255,255,0.8);
 box-sizing: border-box;
}
@media screen and (max-width: 1070px) {
 .p-firstview__content {
  position: static;
  width: 100%;
  transform: none;
  padding: 1.5em 4% 0;
 }
}



/*
 singleClmBox
******************************************/
.p-singleClmBox {
 padding: 0 10%;
 max-width: 940px;
 margin-left: auto;
 margin-right: auto;
}
@media screen and (max-width: 1070px) {
 .p-singleClmBox {
  width: 100%;
  padding: 0;
 }
}
/*
 articleBox
******************************************/
.p-articleBox {}
.p-articleBox__ph {
 width: 45%;
}
@media screen and (max-width: 1070px) {
 .p-articleBox__ph {
  width: 100%;
  margin-bottom: 1em;
 }
}
.p-articleBox__content {
 width: 55%;
 box-sizing: border-box;
 padding-top: 1em;
 padding-left: 5%;
}
.reverse .p-articleBox__content {
 padding-left: 0;
 padding-right: 5%;
}
@media screen and (max-width: 1070px) {
 .p-articleBox__content,
 .reverse .p-articleBox__content{
  width: 100%;
  padding: 0;
 }
}
.p-articleBox__text {
 margin-bottom: 1.5em;
}
.p-articleBox__text p{
 margin-bottom: 1em;
}


.p-credit {
 padding-left: 4%;
}
@media screen and (max-width: 1070px) {
 .p-credit {
  padding-left: 4%;
 }
}
.p-credit span{
 display: inline-block;
}
@media screen and (max-width: 1070px) {
 .p-banner{
  padding: 3.75em 0;
 }
}


/******************************************************************************

utility

******************************************************************************/
.u-bg__black { background: #000;}
.u-bg__black *,
.u-bg__black  .linkBtn a{ 
 color: #FFF !important;
 border-color: #FFF;
}
@media screen and (min-width: 1071px) {
 .u-bg__black .linkBtn a:hover { 
  color: #d5001c;
  border-color: #d5001c;
 }
}

.u-mb__0 { margin-bottom: 0 !important;}
.u-mb__05 { margin-bottom: 0.5em !important;}
.u-mb__1 { margin-bottom: 1em !important;}
.u-mb__15 { margin-bottom: 1.5em !important;}
.u-mb__2 { margin-bottom: 2em !important;}
.u-mb__25 { margin-bottom: 2.5em !important;}
.u-mb__3 { margin-bottom: 3em !important;}
.u-mb__375 { margin-bottom: 3.75em !important;}
.u-mb__5 { margin-bottom: 5em;}