@charset "UTF-8";
/* CSS Document */


/*--------------------
exa
--------------------*/

#exa{
}

#exa_main{
    width: 700px;
    margin: 0 auto;
    text-align: center;
}

#exa_main h1{
    width: 408px;
    margin: 80px auto 50px;
    padding: 35px;
    font-size: 40px;
    font-family: serif;
    border: 1px solid #fff;
}

#exa_main h1 span{
    display: block;
    font-size: 24px;
    padding-top: 10px;
}

#exa_main .read{
    font-size: 28px;
    margin-bottom: 25px;
}


#exa_main ul.keyword{
    text-align: center;
    margin-bottom: 100px;
}

#exa_main .sec{
    padding-bottom: 60px;
}

#exa_main .sec h2{
    font-size: 42px;
    font-family: 'Libre Baskerville', serif;
    letter-spacing: 0.15em;
    display: inline-block;
    margin:  0 auto 70px;
    border-bottom: 1px solid #fff;
}

#exa_main .sec p{
    text-align: left;
    margin-bottom: 50px;
    line-height: 1.9;
}

#exa_main .sec img{
    padding-bottom: 25px;
}

#exa_main .sec p.txt_cap{
    width: 100%;
    padding:0 0 0 10px;
    margin: 0 auto 50px;
    border-left: 1px solid #fff;
    font-size: 14px;
    box-sizing: border-box;
    line-height: 1.6;
}

#exa_main .sec p.txt_cap.txt_v{
    width: 510px;
}

#exa_info{
    width: 100%;
    margin: 0;
    padding: 45px 0 35px;
    background: #313131;
    text-align: left;
    font-size: 14px;
}

#exa_info h3{
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 5px;
}

#exa_info img{
    padding-bottom: 15px;
}

#exa_info .inner{
    width:944px;
    margin: 0 auto;
    overflow: hidden;
}

#exa_ca{
    width: 360px;
    float: left;
}
.exa_ca_w500 {
    width: 500px !important;
}

#exa_data{
    width: 543px;
    float: right;
}
.exa_data_w400 {
    width: 400px !important;
}

#exa_data p{
    display: inline-block;
    vertical-align: top;
    padding-right: 10px;
}

#exa_otherlist .list_exa li .thumb {
  opacity: 0;
  transition: opacity 0.8s;
  backface-visibility: hidden;
}

#exa_otherlist .list_exa li .thumb.imgloaded {
  opacity: 1;
}

#exa .btn_d{
	clear:both;
	display:block;
	width:460px;
	height:82px;
	margin:58px auto 0;
	color:#fff;
	text-align:center;
	line-height:82px;
	transition:0.5s ease;
	font-size:22px;
	border:1px solid #fff;
    background: url("../img/btn_arrow_d.png") no-repeat 395px 35px;
    background-size: 29px auto;
}

#exa .btn_d:hover{
	color:#fff;
    opacity: 0.4;
}

.title_s{
    width: 1024px;
    font-family: 'Libre Baskerville', serif;
    font-size: 40px;
    text-align: center;
    line-height: 1.2;
    padding: 60px 0 45px;
    margin: 0 auto;
}

.title_s span{
    display: block;
    font-size: 18px;
    font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
    padding-top: 5px;
}

/* ---- 740px > ---- */

@media screen and (max-width: 767px) {


/*--------------------
exa
--------------------*/

#exa{
  padding-bottom: 16%;
}

#exa_main{
    width: 92%;
    margin: 0 4%;
}

#exa_main h1{
    width: 90%;
    margin: 15% auto 10%;
    padding: 7% 2%;
    font-size: 28px;
    font-family: 'Noto Serif Japanese', sans-serif;
    box-sizing: border-box;
}

#exa_main h1 span{
    display: block;
    font-size: 20px;
    padding-top: 3%;
}

#exa_main .read{
    font-size: 22px;
    margin-bottom: 5%;
}


#exa_main ul.keyword{
    margin-bottom: 18%;
}

#exa_main .sec{
    padding-bottom: 10%;
}

#exa_main .sec h2{
    font-size: 30px;
    letter-spacing: 0.08em;
    margin:  0 auto 8%;
}

#exa_main .sec p{
    margin-bottom: 7%;
    line-height: 2;
    letter-spacing: 0;
}

#exa_main .sec img{
    width: 100%;
    padding-bottom: 6%;
}

#exa_main .sec p.txt_cap{
    width: 100%;
    padding:0 0 0 3%;
    margin: 0 auto 9%;
}

#exa_main .sec img.img_v{
    width: 86%;
}

#exa_main .sec p.txt_cap.txt_v{
    width: 100%;
}

#exa_info{
    width: 92%;
    padding: 7% 4%;
    margin-bottom: 3%;
}

#exa_info .inner{
    width:100%;
}

#exa_ca{
    width: 100%;
    float: none;
    margin-bottom: 5%;
    overflow: hidden;
}
.exa_ca_w500 {
    width: 100% !important;
}

#exa_ca img{
    width: 50%;
    padding:0 4.5% 3% 0;
    float: left;
}

#exa_ca p{
    padding:0 0 3% 0;
}

#exa_data{
    width: 100%;
    float: none;
}
.exa_data_w400 {
    width: 100% !important;
}

#exa_data img{
    width: 100%;
}

#exa_data p{
    display: block;
    padding-right: 0;
}

#exa .btn_d{
	width:92%;
    height: auto;
    padding: 6% 0;
	box-sizing:border-box;
	color:#fff;
	font-size:16px;
    line-height: 1.2;
	border:1px solid #fff;
    background: url("../img/btn_arrow_d.png") no-repeat 93% 52%;
    background-size: 7% auto;
    margin-top: 0;
}

#exa .btn_d.hover{
	color:#fff;
    opacity: 0.4;
}

.title_s{
    width: 92%;
    font-size: 26px;
    padding: 9.5% 4% 8.5%;
}

.title_s span{
    font-size: 14px;
}



}