@charset "UTF-8";

@media screen and (min-width:768px){
/*pc・タブレットcss*/

.h2-ttl { height: 180px; font-size: 24px; font-weight: bold; line-height: 1.5; letter-spacing: 0.05em; color: #191919; background: url(../images/performance/h2.jpg) no-repeat top; }

.main-contents { color: #191919; font-size: 14px; line-height: 2.2; }
.main-contents .page-sub-ttl { background: #fff; line-height: normal; color: #38520a; text-align: center; font-size: 40px; font-weight: 600; letter-spacing: .1em; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3","Sawarabi Mincho","Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; padding: 0 10px; margin: 0 auto 40px; position: relative; bottom: 10px; }
.main-contents .page-sub-ttl .inner-txt { color: #191919; font-size: 16px; display: block; letter-spacing: .08em; }
.main-contents .border { background: url(../images/common/common-border.jpg) repeat-x center; }
.main-contents .txt-box { letter-spacing: .05em; line-height: 2; }

#contents01 { margin-bottom: 80px; }
#contents01 .bg { background: url(../images/performance/ttl2-bg.jpg) no-repeat center; padding: 88px 0 19px; }
#contents01 .sub-ttl { color: #ffffff; font-size: 28px; font-weight: 600; letter-spacing: .3em; }
#contents01 .en { font-size: 18px; color: #ffffff; position: relative; left: 50px; letter-spacing: .1em; }
#contents01 .en::before { content: ''; display: inline-block; height: 1px; width: 44px; position: absolute; left: -50px; top: 16px; background: #fff; }
#contents01 .sub-ttl02 { color: #191919; font-size: 24px; line-height: 2; letter-spacing: .15em; 
font-weight: bold;
}

#contents02,
#contents03,
#contents04,
#contents05,
#contents06,
#contents07,
#contents08,
#contents09{ margin-bottom: 80px; }
#contents02 .txt-box,
#contents04 .txt-box,
#contents06 .txt-box,
#contents08 .txt-box{ width: 386px; }
#contents03 .txt-box,
#contents05 .txt-box,
#contents07 .txt-box,
#contents09 .txt-box{ width: 386px; order: 1; }
#contents02 .page-sub-ttl { width: 450px; }
#contents03 .page-sub-ttl { width: 332px; }
#contents04 .page-sub-ttl { width: 450px; }
#contents05 .page-sub-ttl { width: 332px; }
#contents06 .page-sub-ttl { width: 332px; }
#contents07 .page-sub-ttl { width: 332px; }
#contents08 .page-sub-ttl { width: 332px; }
#contents09 .page-sub-ttl { width: 332px; }

#contents10 { padding: 40px 0; line-height: 2.2; }
#contents10 .bg { background: url(../images/performance/bg01.jpg) no-repeat; padding: 64px 0 22px 30px; color: #191919; font-size: 17px; line-height: 2.5; }
#contents10 .bg .txt { display: block; margin-bottom: 130px;
font-weight: bold;
}

#contents02 .box-txt:after,
#contents03 .box-txt:after,
#contents04 .box-txt:after,
#contents05 .box-txt:after,
#contents06 .box-txt:after,
#contents07 .box-txt:after,
#contents08 .box-txt:after,
#contents09 .box-txt:after { content: url(../images/design/arrow.png); display: block; text-align: center; margin: 0.5em;}
#contents02 .box,
#contents03 .box,
#contents04 .box,
#contents05 .box,
#contents06 .box,
#contents07 .box,
#contents08 .box,
#contents09 .box { width: 400px; margin: 0 auto 50px;}
#contents02 .box a,
#contents03 .box a,
#contents04 .box a,
#contents05 .box a,
#contents06 .box a,
#contents07 .box a,
#contents08 .box a,
#contents09 .box a { text-decoration: none;display: block; padding: 10px; text-align: center; background: url(../images/common/straipe-green.png); color: #ffffff; font-size: 16px; font-weight: 600; letter-spacing: .1em; }

}


@media screen and (max-width:767px){
/*スマホ用css*/

.h2-ttl { height: 180px; font-size: 24px; font-weight: bold; line-height: 1.5; letter-spacing: 0.05em; color: #191919; background: url(../images/performance/h2.jpg) no-repeat top; }

.main-contents { color: #191919; font-size: 14px; line-height: 2.2; }
.main-contents .page-sub-ttl { line-height: normal; color: #38520a; text-align: center; font-size: 28px; font-weight: 600; letter-spacing: .1em; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3","Sawarabi Mincho","Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; padding: 0; margin: 0 auto 30px; position: relative; bottom: 5px; }
.main-contents .page-sub-ttl .inner-txt { color: #191919; font-size: 16px; display: block; letter-spacing: .08em; }
.main-contents .page-sub-ttl strong { background: #ffffff; padding: 0 10px;}
.main-contents .border { background: url(../images/common/common-border.jpg) repeat-x center; }
.main-contents .txt-box { letter-spacing: .05em; line-height: 2; }

#contents01 { margin-bottom: 80px; }
#contents01 h4 img { width: 100%; height: auto; }
#contents01 .bg { background: url(../images/performance/ttl2-bg.jpg) no-repeat center; padding: 80px 0 20px; margin-bottom: 30px; }
#contents01 .bg + .ac { text-align: left; }
#contents01 .sub-ttl { color: #ffffff; font-size: 28px; font-weight: 600; letter-spacing: .3em; }
#contents01 .en { font-size: 18px; color: #ffffff; position: relative; left: 50px; letter-spacing: .1em; }
#contents01 .en::before { content: ''; display: inline-block; height: 1px; width: 44px; position: absolute; left: -50px; top: 16px; background: #fff; }
#contents01 .sub-ttl02 { color: #191919; font-size: 24px; line-height: 2; letter-spacing: .15em; 
font-weight: bold;
}

#contents02,
#contents03,
#contents04,
#contents05,
#contents06,
#contents07,
#contents08,
#contents09{ margin-bottom: 80px; }
#contents02 .ten-ce,
#contents04 .ten-ce,
#contents06 .ten-ce,
#contents08 .ten-ce { display: block;}
#contents03 .ten-ce,
#contents05 .ten-ce,
#contents07 .ten-ce,
#contents09 .ten-ce { -webkit-flex-wrap: wrap; flex-wrap: wrap;}
#contents02 .txt-box,
#contents04 .txt-box,
#contents06 .txt-box,
#contents08 .txt-box { margin-bottom: 20px; }
#contents03 .txt-box,
#contents05 .txt-box,
#contents07 .txt-box,
#contents09 .txt-box { -webkit-flex-basis: 100%; flex-basis: 100%; -webkit-order: 1; order: 1; }
#contents02 .txt-box + div,
#contents04 .txt-box + div,
#contents06 .txt-box + div,
#contents08 .txt-box + div { text-align: center; margin-bottom: 20px;}
#contents02 .txt-box + div img { width: 100%; max-width: 357px; height: auto;}
#contents04 .txt-box + div img { width: 100%; max-width: 365px; height: auto;}
#contents06 .txt-box + div img { width: 100%; max-width: 367px; height: auto;}
#contents08 .txt-box + div img{ width: 100%; max-width: 365px; height: auto;}
#contents03 .txt-box + div,
#contents05 .txt-box + div,
#contents07 .txt-box + div,
#contents09 .txt-box + div { -webkit-flex-basis: 100%; flex-basis: 100%; -webkit-order: 2; order: 2; text-align: center;}
#contents03 .txt-box + div img { width: 100%; max-width: 365px; height: auto;}
#contents05 .txt-box + div img { width: 100%; max-width: 367px; height: auto;}
#contents07 .txt-box + div img { width: 100%; max-width: 365px; height: auto;}
#contents09 .txt-box + div img { width: 100%; max-width: 365px; height: auto;}


#contents10 { padding: 0; line-height: 2.2;}
#contents10 .bg { background: url(../images/performance/bg01_sp.jpg) no-repeat right bottom / 100% auto; padding:20px 20px 30vh; color: #191919; font-size: 16px; line-height: 2.5; border: 1px solid #bbbbbb; }
#contents10 .bg .txt { display: block; margin-bottom: 30px; font-weight: bold; }
#contents10 .bg .txt + span img { width: 100%; max-width: 415px; height: auto; }

#contents02 .box-txt:after,
#contents03 .box-txt:after,
#contents04 .box-txt:after,
#contents05 .box-txt:after,
#contents06 .box-txt:after,
#contents07 .box-txt:after,
#contents08 .box-txt:after,
#contents09 .box-txt:after { content: url(../images/design/arrow.png); display: block; text-align: center; margin: 0.5em;}
#contents02 .box,
#contents03 .box,
#contents04 .box,
#contents05 .box,
#contents06 .box,
#contents07 .box,
#contents08 .box,
#contents09 .box { width: 100%; margin: 0 auto 50px;}
#contents02 .box a,
#contents03 .box a,
#contents04 .box a,
#contents05 .box a,
#contents06 .box a,
#contents07 .box a,
#contents08 .box a,
#contents09 .box a { text-decoration: none;display: block; padding: 10px; text-align: center; background: url(../images/common/straipe-green.png); color: #ffffff; font-size: 16px; font-weight: 600; letter-spacing: .1em; }

}