@charset "utf-8";

#Contents{
font-family: Noto Sans JP, sans-serif;
}
#Contents,
#Contents *{
box-sizing: border-box;
}
.hideSP{
display: block;
}
.showSP{
display: none;
}

/** mv **/
.mv {
padding-top: 20px;
}
.mv .mainImg {
position: relative;
}
.mv .mainImg img {
width: 100%;
}
.mv .mainImgAddCap {
text-align: right;
padding-right: 15px;
}
.PageTop a {
font-family: initial;
}
.buildingMain .mainImg {
position: relative;
height: 490px;
background-size: cover;
background-position: center;
}
.buildingMain .mainCatch .buildingMainTxt01 {
/*background-color: #e60027;*/
background-color: #CC0000;
top: 0;
left: 0;
padding-left: calC((100% - 1015px)/2);
padding-top: 5px;
padding-bottom: 5px;
padding-right: 50px;
min-height: 65px;
height: 65px;
display:-webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-justify-content:center ;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
box-sizing: border-box;
}
.buildingMain .mainCatch .buildingMainTxt01 .mainTxt01_01 {
font-size: 112.5%;
display: block;
font-weight: normal;
padding-bottom: 3px;
-webkit-align-self:baseline;
-ms-flex-item-align:baseline;
align-self:baseline;
}
.buildingMain .mainCatch .buildingMainTxt01 .mainTxt01_02 {
font-size: 125%;
font-weight: bold;
align-self:baseline;
}
.buildingMain .buildingMainTxt02 {
bottom: 0;
left: 0;
padding: 0;
margin: 0;
background: none;
padding-left: calC((100% - 1015px)/2);
}
.buildingMain .buildingMainTxt02.rightPosi {
padding-right: calC((100% - 1015px)/2);
right: 0;
left: initial;
left: auto;
}
.buildingMain .buildingMainTxt02 .mainTxt02_01,
.buildingMain .buildingMainTxt02 .mainTxt02_02 {
padding: 0;
background: none;
color: #fff;
}
.buildingMain .buildingMainTxt01,
.buildingMain .buildingMainTxt02{
position: absolute;
color: #fff;
}
.buildingMain .buildingMainTxt02 .mainTxt02_01 {
font-size: 137.5%;
display: block;
padding-bottom: 10px;
}
.buildingMain .buildingMainTxt02 .mainTxt02_02 {
font-size: 318.75%;
padding-bottom: 28px;
}

@media screen and (max-width: 1304px){
.OptionWideRWD #Contents {
padding-right: 0;
padding-left: 0;
}
.GridSet {
padding: 0 15px;
}
}

@media screen and (max-width: 1029px){
.buildingMain .mainCatch .buildingMainTxt01 {
padding-left: 15px;
padding-right: 15px;
}
.buildingMain .buildingMainTxt02 {
padding-left: 15px;
}
}

@media screen and (max-width: 767px){
.mv {
padding-top: 16px;
}
.mv .mainImgAddCap {
font-size: 75%;
}
.buildingMain .mainImg {
height: 220px;
}
.buildingMain .mainCatch .buildingMainTxt01 {
height: auto;
}
.buildingMain .mainCatch .buildingMainTxt01 {
min-height: 45px;
}
.buildingMain .mainCatch .buildingMainTxt01 .mainTxt01_01 {
font-size: 87.5%;
}
.buildingMain .mainCatch .buildingMainTxt01 .mainTxt01_02 {
font-size: 100%;
}
.buildingMain .buildingMainTxt02 .mainTxt02_01 {
font-size: 87.5%;
padding-bottom: 5px;
}
.buildingMain .buildingMainTxt02 .mainTxt02_02 {
font-size: 131.25%;
padding-bottom: 5px;
}
}

/****/
.Section,
.Section *{
box-sizing: border-box;
}
.caseTitleWrap{
max-width: 1015px;
margin-left: auto;
margin-right: auto;
padding-top: 30px;
padding-bottom: 30px;
}
.caseTitleWrap h2.caseTitleH2{
margin: 0 auto;
width: fit-content;
}
.caseTitleH2{
background-color: transparent;
line-height: 1.0em;
}
.caseTitleH2 span{
background-color: transparent;
}
.caseTitleH2_01{
font-size: 22px;
color: #010101;
font-weight: 500;
padding-bottom: 0;
}
.caseTitleH2_02{
font-size: 46px;
color: #010101;
font-weight: 700;
}

/** case H3 **/
.caseH3{
margin-top: 60px;
text-align: center;
width: 100%;
overflow: hidden;
}
.h3Inner01,
.h3Inner02{
max-width: 770px;
display: block;
margin: 0 auto;
}
.h3Inner01{
text-align: left;
}
.h3Inner02{
text-align: right;
}
.h3Text{
display: flex;
flex-direction: column;
gap: 5px;
text-align:left;
/*background-color: #e60027;*/
background-color: #CC0000;
width: fit-content;
position: relative; 
color: #fff;
}
.h3Textsub{
font-size: 24px;
font-weight: 200;
line-height: 1.3em;
}
.h3TextTitle{
font-size: 34px;
font-weight: 200;
line-height: 1.3em;
}
.h3Inner01 .h3Text{
padding: 15px 15px 15px 0;
}
.h3Inner02 .h3Text{
padding: 15px 0 15px 15px;
margin-right: 0;
margin-left: auto;
}
.h3Inner01 .h3Text::before,
.h3Inner02 .h3Text::before{
content: "";
position: absolute;
top: 0;
bottom: 0;
/*background-color: #e60027;*/
background-color: #CC0000;
}
.h3Inner01 .h3Text::before{
right: 100%;
left: -50vw;
}
.h3Inner02 .h3Text::before{
right: -50vw;
left: 100%;
}

/** case text **/
p.caseText{
font-size: 16px;
line-height: 1.8em;
}
p.caseText+p.caseText{
margin-top: 1.5em;
}
p.caseText sup{
font-size: 11.2px;
}

/****/
.caseWrap{
max-width: 770px;
margin-left: auto;
margin-right: auto;
padding-top: 30px;
padding-bottom: 30px;
}

/** case **/
.caseSummaryBoxWrap,
.caseBoxWrap{
display: flex;
gap: 30px;
}
.caseBox01{
display: flex;
align-items: center;
justify-content: center;
/*border: 4px solid #e60027;*/
border: 4px solid #CC0000;
width: calc(33.333% - 30px);
min-height: 150px;
font-weight: bold;
padding: 35px 0;
font-size: 20px;
text-align: center;
/*color: #e60027;*/
color: #CC0000;
}
.caseBox02{
width: calc(66.666% - 30px);
}
.caseImgCaption{
padding-top: 8px;
}
.caseImgMeta{
padding-top: 0;
text-align: right;
}

/** case note list **/
.caseNoteListStyle{
list-style: none;
counter-reset: numbered;
padding: 30px 0 0;
}
.caseNoteListStyle li {
display: flex;
gap: 6px;
align-items: flex-start;
margin-bottom: 1em;
font-size: 12px;
flex: 1;
}
.caseNoteListStyle li.marker {
flex: 0 0 2em;
text-align: right;
padding-right: 1em;
font-weight: bold;
}
.caseImg{
margin-top: 20px;
}
.caseBoxWrap .caseImg{
margin-top: 0;
}
.caseBoxWrap .caseImg img{
width: 100%;
height: auto;
}

/* column half */
.caseBoxItemHalf{
width: calc((100% - 30px) /2);
}

/** checkpoint **/
.sectionCheckpoint{
border-top: 2px solid #999;
}
.subTitleCheckpoint{
margin-top: 40px;
font-size: 24px;
font-weight: 700;
}
h3.caseH3Checkpoint{
/*background-color: #e60027;*/
background-color: #CC0000;
}
h3.caseH3Checkpoint>span{
display: flex;
flex-direction: column;
gap: 0;
color: #fff;
padding: 20px 40px;
}
h3.caseH3Checkpoint>span .h3Textsub{
font-size: 24px;
font-weight: 300;
}
h3.caseH3Checkpoint>span .h3TextTitle{
font-size: 48px;
}
.checkpointListStyle{
margin-top: 40px;
}
.checkpointListStyle li{
padding-left: 26px;
position: relative;
font-size: 18px;
}
.checkpointListStyle li:nth-child(n+2){
margin-top: 15px;
}
.checkpointListStyle li::before{
display: block;
content: "";
position: absolute;
top: 0.2em;
left: 0;
width: 20px;
height: 20px;
background-image: url(../image/icon_checked.png);
background-repeat: no-repeat;
}

/** stuff **/
.sectionStuff{
/*background-color: #F1C2AA;*/
background-color: #FDC796;
margin-top: 60px;
}
.stuffBox{
display: flex;
gap: 60px;
padding: 40px 0;
}
.stuffMeta{
font-size: 18px;
font-weight: 700;
width: 60%;
}
.staffTagline{
margin-bottom: 20px;
}
.staffDepartment{
margin-bottom: 8px;
}
.stuffBox .stuffImg{
width: 40%;
}
.stuffBox .stuffImg img{
width: 160px;
height: auto;
display: block;
margin: 0 auto;
}

@media screen and (min-width: 1305px){
.OptionWideRWD #Contents .caseImg img{
max-width: 100%;
height: auto;
}
}

@media screen and (max-width: 800px){
.stuffBox{
padding: 40px 15px;
}
.h3Inner01 .h3Text,
.h3Inner02 .h3Text{
padding: 15px;
}
p.caseText{
padding: 0 15px;
}
.caseImgCaption,
.subTitleCheckpoint {
padding-left: 15px;
}
.caseImgMeta{
padding-right: 15px;
}
.caseNoteListStyle {
padding: 30px 15px 0;
}
.caseSummaryBoxWrap,
.checkpointListStyle{
padding-left: 15px;
padding-right: 15px;
}
}
@media screen and (max-width: 770px){
.hideSP{
display: none;
}
.showSP{
display: block;
}
.caseTitleH2_01{
font-size: 18px;
}
.caseTitleH2_02{
font-size: 36px;
}
.caseBoxWrap,
.caseSummaryBoxWrap{
display: flex;
flex-direction: column;
}
.caseBox01{
width: 100%;
padding: 35px 20px;
font-size: 20px;
}
.caseBox02{
width: 100%;
}
.caseBoxItemHalf{
width: 100%;
}
.caseH3{
width: 100%;
}
.h3Inner01,
.h3Inner02{
max-width: none;
width: 100%;
}
.h3Inner01 .h3Text,
.h3Inner02 .h3Text{
padding: 15px;
width: 100%;
}
.h3Textsub{
font-size: 20px;
font-weight: 200;
}
.h3TextTitle{
font-size: 28px;
font-weight: 200;
}
h3.caseH3Checkpoint>span .h3Textsub{
font-size: 20px;
font-weight: 200;
}
h3.caseH3Checkpoint>span .h3TextTitle{
font-size: 40px;
font-weight: 200;
}
.h3Inner01 .h3Text::before,
.h3Inner02 .h3Text::before{
display: none;
}
.subTitleCheckpoint {
font-size: 19px;
}
.staffDepartment{
font-size: 14px;
}
.staffRepresentative{
font-size: 17px;
}
}