@charset "utf-8";
/*-------------------------------------------------
	main
--------------------------------------------------*/
#main { margin-top: 0px; text-align: center;}
#main .main_wrap{display: flex; align-items: center; justify-content: center;margin: 0 auto; width: 100%;position: relative;}
#main .main_wrap .inner{display: flex; width: 100%; max-height: 100vh;}
#main .main_wrap .inner .txt_wrap{ width: 51.8%; }
#main .main_wrap .inner .txt_wrap .txt_box{ width: 100%;height: 90%; display: flex; align-items: center; justify-content: center;}
#main .main_wrap .inner .img_wrap{ width: 42.5%; }
#main .main_wrap .inner .img_wrap .img_box { width: 100%; max-height: 100vh; display: flex; align-items: center;  justify-content: flex-start;}
#main .main_wrap .inner .img_wrap .img_box img{ width: auto; height: auto; max-width: 100%; max-height: 100vh;}
.h1_1,
.h1_2,
#main p.lead span{ display: inline-block; }
@media screen and (max-width: 1000px) {
#main .main_wrap .inner{flex-direction: column-reverse;  width: 100%; max-height: initial;}
#main .main_wrap .inner .txt_wrap{padding-top: 2%; width: 100%; max-height: initial; }
#main .main_wrap .inner .img_wrap{width: 100%;} 
#main .main_wrap .inner .img_wrap .img_box { width: 100%; max-height: initial; }
#main .main_wrap .inner .img_wrap .img_box img{ width: 100%; max-width: initial; max-height: initial;}
}
@media screen and (max-width: 700px) {
#main .main_wrap .inner .txt_wrap{padding-top: 6%;}
#main .main_wrap .inner .img_wrap{width: 140%;} 
#main .main_wrap .inner .img_wrap .img_box img{ position: relative; width: 100%; left: -15%;} 
}
@media screen and (max-width: 500px) {
#main .main_wrap .inner .img_wrap{width: 180%;} 
#main .main_wrap .inner .img_wrap .img_box img{ position: relative; width: 100%; left: -22.5%;} 
}
/*[ on / off ]*/
#main .x15{ display: block;}
#main .x1{ display: none;}
#main .sp{ display: none;}
@media screen and (max-width: 1500px) {
#main .x15{ display: none;}
#main .x1{ display: block;}
#main .sp{ display: none;}
}
@media screen and (max-width: 1000px) {
#main .x15{ display: none;}
#main .x1{ display: none;}
#main .sp{ display: block;}
}

.sl_main{ width: 100%;}

/*-------- font --------*/
#main h1{ margin-top: 19%; font-family:'Times New Roman', serif;}
.h1_2{margin-top: 4%;display: flex; align-items: center; justify-content: center;}
@media screen and (max-width: 1000px) {
#main h1{ margin-top: 15%;}
}
#main p.lead{font-size: 1.37vw; letter-spacing: 1.3px; line-height: 1.75;}
.h1_1{font-size: 5.8vw;letter-spacing: .22vw;line-height: 1;}
.h1_2{font-size: 2.3vw;letter-spacing: .09vw;line-height: 1.1;}
.side_bar{ margin: 0 .9vw; width: 2.35vw; height: 1.5px; background: #000;display: inline-block; }
@media screen and (max-width: 1500px) {
.side_bar{ margin: 0 .9vw; width: 2.35vw; height: 1.5px;}
}
@media screen and (max-width: 1400px) {
.side_bar{ margin: 0 .9vw; width: 2.35vw; height: 1px;}
}
@media screen and (max-width: 1000px) {
#main p.lead{font-size: 2.63vw;}
.h1_1{font-size: 9vw;letter-spacing: .32vw;}
.h1_2{font-size: 3.2vw;letter-spacing: .25vw;}
.side_bar{ margin: 0 1.6vw; width: 4.63vw; height: 1.5px;}
}
@media screen and (max-width: 700px) {
#main p.lead{font-size: 3.5vw;}
.h1_1{font-size: 13vw;letter-spacing: .33vw;}
.h1_2{font-size: 5.2vw;letter-spacing: .25vw;}
.side_bar{ margin: 0 1.6vw; width: 4.63vw;height: 1.5px;}
}
@media screen and (max-width: 500px) {
#main p.lead{font-size: 4vw;}
.h1_1{font-size: 14vw;letter-spacing: .33vw;}
.h1_2{font-size: 5.8vw;letter-spacing: .25vw;}
.side_bar{ margin: 0 1.6vw; width: 4.63vw;height: 1px;}
}

/*-------- scroll --------*/
.scroll{ height: 26%; width: 100px; margin-left: -50px; position: absolute; left: 2.9%; bottom: -12%; z-index: 99; }
.scroll .scroll_inner{ height: 100%; width: 100%; overflow:hidden; position: relative; z-index: 5; transition: .3s; }
.scroll a{ display: block; width: 100%; height: 100%; position: relative; z-index: 200; transition: 0.3s; cursor: pointer; color: #000; text-decoration: none;}
.scroll a .scroll_wheel{ width: 1px; height: 100%;  opacity: 0; animation: scroll_wheel 2s .5s 1 forwards ease-out; background:rgba(0,0,0,.1); display: block; position: absolute; left: 50%; bottom:0px; margin-left: -0.5px; transition: 0.3s;}
@keyframes scroll_wheel { 0% { bottom:0%; opacity: 0;} 100% { bottom:0%; opacity: 1;}}
.scroll a .scroll_wheel:after { opacity: 1; width: 100%; height: 20%; animation: scroll_wheel_after 2s 0.5s infinite normal ease; background:#000; position: absolute; content:" "; display:block; z-index: 11; left: 0%; top:-100%; }
@keyframes scroll_wheel_after { 0% { top:0%; opacity: 1;} 30% { top:100%; opacity: 1;} 31% { top:100%; opacity: 0;} 32% { top:-34%; opacity: 0;} 33% { top:-34%; opacity: 1;} 80% { top:0%;} 100% { top:0%;} }
.scroll a:hover { opacity: 0.5;}
@media screen and (max-width: 600px) {
.scroll{display: none;}
}
@media screen and (max-width: 1000px) {
.scroll{ left: 5%;}
}
.scroll_txt{font-size: 17px; line-height: 1; letter-spacing: 1.2px; text-align: right; position: absolute; top: -85px; left: 50%; width: 100px; margin-left: -50px; text-align: right;transform: rotate( 90deg );font-family:'Times New Roman', serif;font-weight: lighter;}
@media screen and (max-width: 1600px) {
.scroll_txt{ font-size: 1.06vw; top: -5.3vw;}
}
@media screen and (max-width: 1400px) {
.scroll_txt{ font-size: 1.06vw; top: -75px;}
}
@media screen and (max-width: 1000px) {
.scroll_txt{ font-size: 14px; top: -85px;}
}
@media screen and (max-width: 640px) {
.scroll_txt{ font-size: 13px; top: -85px;}
}
@media screen and (max-width: 400px) {
.scroll_txt{ font-size: 12px; top: -85px;}
}

/*-------------------------------------------------
	co_slide
--------------------------------------------------*/
#media_slide{ padding: 150px 0; background: #f1f1f1; position: relative; margin-top: 0px; overflow: hidden; }
.co_sl_word li{ font-size:130px; line-height: 1.15; font-family:'Times New Roman', Times, serif; font-weight: normal; color: #fff; margin-right: 5vw; outline: none;}
@media (max-width:1600px){
.co_sl_word li{ font-size:9vw; line-height: 1.15;}
}/*END*/
@media (max-width:1000px){
#media_slide{ padding: 10vw 0; }
.co_sl_word li{ font-size:13vw; line-height: 1.15;}
}/*END*/

/*-------------------------------------------------
	banner_list
--------------------------------------------------*/
#banner_list{ padding: 0 30px 80px; margin: 0 auto;}

@media screen and (max-width: 1000px) {
#banner_list{ padding: 0 20px 60px;}
}
@media screen and (max-width: 640px) {
#banner_list{ padding: 0 10px 60px;}
}
@media screen and (max-width: 500px) {
#banner_list{ padding: 0 10px 40px;}
}
/*-------------------------------------------------
	banner 共通
--------------------------------------------------*/
.head_space{ height: 70px; display: block;}
#co_main{ margin-top: 0px;}
#co_main .banner{background: #000; margin-top: 0px; }
#banner_list .banner{ margin-top: 30px; }
.banner a,
.banner h1,
.banner h2{color: #fff;text-decoration: none;font-family:'Times New Roman', serif;}
.banner img{width: 100%;}
@media screen and (max-width: 1000px) {
#banner_list .banner{ margin-top: 20px;}
}
@media screen and (max-width: 640px) {
#banner_list .banner{ margin-top: 10px;}
}

/*-------- font-size --------*/
.banner h1,
.banner h2{ font-size: 36px;line-height: 1.2;letter-spacing: 2.2px;}
@media screen and (max-width: 1450px) {
.banner h1,
.banner h2{ font-size: 2.48vw; letter-spacing: 0.15vw;}
}
@media screen and (max-width: 1000px) {
.banner h1,
.banner h2{ font-size: 3.5vw;}
}
@media screen and (max-width: 450px) {
.banner h1,
.banner h2{ font-size: 5vw;}
.about_banner h1,
.about_banner h2{ font-size: 3.75vw; letter-spacing: 0vw;}
}

/*---------------------------
	特例 font-size
	・トランセンディングタイム
	・jazz
 ----------------------------*/
@media screen and (max-width: 450px) {
h1.ksctt { font-size: 3.8vw; letter-spacing: 0vw;}
h1.jazz { font-size: 3.8vw; letter-spacing: 0vw;}
#king_seiko_creators_transcending_time h2 { font-size: 3.8vw; letter-spacing: 0vw;}
#seiko_summer_jazz_camp h2 { font-size: 3.8vw; letter-spacing: 0vw;}
}

/*-------- banner_bar --------*/
.banner_bar{margin-top: 16px !important; width: 50px; height: 1px; background: #fff; opacity: .3; display: block; }
#co_main .banner_bar{ transition: initial;}
#banner_list .banner_bar{ transition: .5s;}
#banner_list a:hover .banner_bar{width: 80px; height: 1px; background: #fff;  opacity: 1;}
@media screen and (max-width: 1450px) {
.banner_bar{margin-top: 1.01vw !important;}
}
@media screen and (max-width: 1000px) {
.banner_bar{margin-top: 1.5vw !important;}
}
@media screen and (max-width: 640px) {
.banner_bar{width: 44px;}
.banner a:hover .banner_bar{width: 44px;}
.banner .media_banner_bar{width: 30px;}
.banner a:hover .media_banner_bar{width: 30px;}
}
@media screen and (max-width: 450px) {
.banner_bar{width: 10vw;}
.banner a:hover .banner_bar{width: 10vw;}
.banner .media_banner_bar{width: 8vw;}
.banner a:hover .media_banner_bar{width: 8vw;}
}

/*[ on / off ]*/
@media screen and (max-width: 1600px) {
}/*END*/
@media screen and (max-width: 1000px) {
}/*END*/

/*-------------------------------------------------
	banner
--------------------------------------------------*/
.banner{width: 100%;position: relative;overflow: hidden;}
.banner_wrap{width: 100%;height: 100%;position: absolute;display: flex; align-items: center; justify-content: center;overflow: hidden;}
.banner_wrap .inner{max-width: 1300px;width: 83%;z-index: 2; }
.banner a .img_box img{transition: all .5s;}
.banner a:hover .img_box img{ transform: scale(1.05);}
@media screen and (max-width: 2400px) {
.banner .img_box{position: relative; left: 50%; max-width: 2400px; margin-left: -1200px;}
}
@media screen and (max-width: 1600px) {
.banner .img_box{left: initial;margin-left: initial;}
}
@media screen and (max-width: 1000px) {
.banner_wrap .inner{max-width: 1000px;width: 80%;}
.about_banner  .inner{ width: 87%;}
}

/* --- banner_wrap_r --- */
.banner_wrap_r{width: 100%;height: 100%;position: absolute;display: flex; align-items: center; justify-content: center; overflow: hidden; }
.banner_wrap_r .inner{max-width: 1200px;width: 77%;z-index: 2; display: flex; flex-direction : row-reverse;}
@media screen and (max-width: 1000px) {
.banner_wrap_r .inner{max-width: 1000px;width: 80%;}
}

/*-------------------------------------------------
	Campaign
--------------------------------------------------*/
.campaign_banner{padding: 60.5px 0;background: #696b6b;}
.campaign_banner .banner_wrap{position: initial;}
.campaign_banner .banner_wrap .inner{display: flex;}
.campaign_banner .title_box{ margin-top: 150px;margin-right: 12.2%;}

/*-------- li --------*/
.campaign_banner li{ margin-top: 70px; }
.campaign_banner li:first-child{margin-top: 0px;}
.campaign_banner .banner_wrap .inner li a{ display: flex; align-items: center; }
.campaign_banner .banner_wrap .inner li a p{ transition: 0.3s; }
.campaign_banner .banner_wrap .inner li a:hover p{ opacity: 0.6;}
.campaign_banner .banner_wrap .inner li a:hover .img_box img{ opacity: 0.6; transform: scale(1.02);}
.campaign_banner li .img_box{ margin-right: 8%; width: 733px; overflow: hidden;}
/*-------- 交差 --------*/
.campaign_banner  li:nth-child(even) a{ flex-direction : row-reverse;}
.campaign_banner  li:nth-child(even) .img_box{ margin-right: initial;}
.campaign_banner  li:nth-child(even) .txt_box{ margin-right: 8.2%;}
@media screen and (max-width: 2400px) {
.campaign_banner li .img_box{ position: relative; left: initial; max-width: 2400px; margin-left: initial;}
}
@media screen and (max-width: 1600px) {
.campaign_banner{padding: 3.14vw 0;}
.campaign_banner li .img_box{width: 44.5vw; margin-right: 5%;}
.campaign_banner .title_box{ margin-top: 9.4vw;}
}
@media screen and (max-width: 1000px) {
.campaign_banner{padding: 10% 0;}
.campaign_banner .banner_wrap .inner{display: block;}
.campaign_banner .title_box{ margin: 0 auto;text-align: center;}
.campaign_banner .banner_bar{margin: 0 auto;width: 6.4vw !important;}
.campaign_banner  ul{margin-top: 10%;}
.campaign_banner  li{margin: 11% auto 0px;width: 70%;}
.campaign_banner li .img_box{width: 100%;}
.campaign_banner .title_box{ margin-top: initial;}
}
@media screen and (max-width: 640px) {
.campaign_banner  li{ width: 90%;}
}
@media screen and (max-width: 500px) {
.campaign_banner  li{ width: 100%;}
}

/*-------- fontサイズ --------*/
.campaign_banner .txt_box p{font-size: 15px;line-height: 1.9;color: #fff;white-space: nowrap;font-family: 'Noto Serif JP', serif; font-weight: 400; }
@media screen and (max-width: 1600px) {
.campaign_banner .txt_box p{font-size: .95vw;}
}

@media screen and (max-width: 500px) {
.campaign_banner .txt_box p{font-size: 14px;}
}
@media screen and (max-width: 450px) {
.campaign_banner .txt_box p{font-size: 3.1vw;}
}

/*-------------------------------------------------
	パンクズリスト
--------------------------------------------------*/
.breadcrumb {list-style: none; display: flex; align-items: center; margin: 6.5px auto 0 ;flex-wrap: wrap;width:100%;padding: 0 14px;}
.breadcrumb-item + .breadcrumb-item::before {content: " "; display: inline-block;width: 4px; height: 7px;background-image: url("../img/ic_arrow_b.svg");background-size: contain;background-repeat: no-repeat;padding: 0;margin: 0 14px 0 0;font-size: 1px;}
.breadcrumb-item.active a {color: #666;cursor: default;}
.breadcrumb-item a,
.breadcrumb-item {font-size: 12px;line-height: 2;letter-spacing: 0.06em;display: inline-block;color: #000;}
.breadcrumb-item a{margin-right: 14px; text-decoration: none;}
.breadcrumb-item a:hover {opacity: 0.6;}
.breadcrumb .page_before a{outline: none; color: #000; border-bottom: 1px solid #000;padding-bottom: 0px;}
@media screen and (max-width: 1000px) {
.breadcrumb {list-style: none; display: flex; margin: 10px auto 0 ;}
}
@media screen and (max-width: 400px) {
.breadcrumb {padding: 0 15px;}
.breadcrumb-item + .breadcrumb-item::before {margin: 0 10px 0 0;}
.breadcrumb-item a{margin-right: 10px;}
}

/*-------- パンクズリスト黒 --------*/
.black{ background: #000; margin: 0; display: inline-block; width: 100%; color: #fff;}
.black .breadcrumb-item {font-size: 12px;line-height: 2;letter-spacing: 0.06em;display: inline-block;color: #666;}
.black .breadcrumb a{outline: none; color: #666; border-bottom: 1px solid #666;padding-bottom: 0px;}
.black .breadcrumb-item + .breadcrumb-item::before {content: " "; display: inline-block;width: 4px; height: 7px;background-image: url("../img/ic_arrow_g.svg");background-size: contain;background-repeat: no-repeat;padding: 0;margin: 0 14px 0 0;font-size: 1px;}

/*-------------------------------------------------
	co_media
--------------------------------------------------*/
.media_wrap{background: #f1f1f1;}

#co_media{ padding-bottom: 100px; display: flex; align-items: center; justify-content: center;}
#co_media .co_inner{ margin-top: 66px;max-width: 1600px; width: 90%;}
/*-------- タイトル --------*/
#co_media .co_inner .title_box h2{text-align: center; width: 90%;margin: 0 auto;}
#co_media .co_inner .title_box h2 span{display: inline-block;}
#co_media .co_inner .title_box .title_bar{ width: 113px;height: 3px; margin: 34px auto 0; background: #c4c6c8;}
/*-------- ul --------*/
#co_media .co_inner ul{margin: 78px auto 0px;max-width: 1150px;display: flex;  justify-content: space-between;flex-wrap: wrap;}
#co_media .co_inner ul li{padding: 20px;background: #fff;width: 48.7%;margin-top: 28px; box-sizing: border-box;}
#co_media .co_inner ul li a .img_box{overflow: hidden;background: #000;}
#co_media .co_inner ul li a .img_box img{transition: all .5s;}
#co_media .co_inner ul li a:hover .img_box img{opacity: 0.7; transform: scale(1.05); }
#co_media .co_inner ul li a:hover .txt_box{ opacity: 0.7;}
#co_media .co_inner ul li .txt_box{margin: 19px auto 0;color: #000;width: 98%;}
#co_media .co_inner ul li a {text-decoration: none;}
#co_media .co_inner ul li:nth-child(1){ margin-top: 0px !important;}
#co_media .co_inner ul li:nth-child(2){ margin-top: 0px;}
@media screen and (max-width: 1300px) {
#co_media .co_inner ul li{padding: 1.5vw 1.5vw 20px;}
}
@media screen and (max-width: 900px) {
#co_media .co_inner ul li{padding: 15px 15px 20px;}
}
@media screen and (max-width: 900px) {
#co_media .co_inner .title_box h2{max-width: 500px;}
}
@media screen and (max-width: 640px) {
#co_media .co_inner{ margin-top: 46px; }
#co_media .co_inner ul{ margin: 68px auto 0px; display: block;}
#co_media .co_inner ul li{width: 90%;margin: 28px auto 0;padding: 3vw 3vw 20px;}
#co_media .co_inner ul li:nth-child(2){ margin-top: 28px;}
#co_media .co_inner .title_box .title_bar{ width: 80px;height: 2px; margin: 24px auto 0; background: #c4c6c8;}
}

/*-------- fontサイズ --------*/
#co_media .co_inner .title_box h2{  font-size: 24px; line-height: 1.5;color: #000;}
#co_media .co_inner ul li .txt_box p{ font-size: 16px; line-height: 1.6;letter-spacing: .7px;}
@media screen and (max-width: 1000px) {
#co_media .co_inner ul li .txt_box p{ font-size: 14px;}
}
@media screen and (max-width: 700px) {
#co_media .co_inner .title_box h2{  font-size: 20px;}
#co_media .co_inner ul li .txt_box p{ font-size: 13px;}
}
@media screen and (max-width: 400px) {
#co_media .co_inner .title_box h2{  font-size: 18px;}
#co_media .co_inner ul li .txt_box p{ font-size: 12px;}
}

/*-------------------------------------------------
	co [ base ]
--------------------------------------------------*/
hr{ margin: 0; width: 100%; height: 1px; background: #cfd1d4; position: relative; z-index: 5;}

/*-------------------------------------------------
	Exterior 
--------------------------------------------------*/
/*-------- co_exterior_lead --------*/
/*-------- lead --------*/
#co_exterior_lead {padding: 80px 0 120px; width: 80%;max-width: 1150px;margin: 0 auto; text-align: center;}
#co_exterior_lead .title_box h2{margin-top: 0px;}
#co_exterior_lead .title_box h3{margin-top: 25px;}
#co_exterior_lead .txt_box{ text-align: left;}
#co_exterior_lead .txt_box p span{display: inline-block;}
#co_exterior_lead .title_box h3 br{display: block;}
@media (max-width: 480px) {
#co_exterior_lead .title_box h3 br{display: none;}
#co_exterior_lead .title_box h3 span{display: inline-block;}
}/*end*/
@media (max-width: 640px) {
#co_exterior_lead {padding: 60px 0 80px; width: 85%;}
}/*end*/
@media (max-width: 500px) {
#co_exterior_lead {padding: 50px 0 60px; width: 85%;}
}/*end*/
#co_exterior .wrap{ padding: 100px 0 120px; text-align: center;}
#co_exterior .wrap h2{ margin: 0 0 75px; font-size: 26px; line-height: 1; letter-spacing: 10px; font-family: Georgia, 'Times New Roman', Times, serif;}
#co_exterior .wrap h4{ margin: 10px 0 25px; font-size: 22px; line-height: 1; letter-spacing: 5px; font-family: Georgia, 'Times New Roman', Times, serif;}
#co_exterior .wrap .img_box{ margin: 70px auto 0; width: 90%; }
#co_exterior .wrap .txt_box{ margin: 70px auto 0; width: 90%; max-width: 1050px; text-align: left;}
@media (max-width: 1400px) {
#co_exterior .wrap{ padding: 95px 0 110px; }
#co_exterior .wrap h2{ margin: 0 0 70px; font-size: 24px; letter-spacing: 9px; }
#co_exterior .wrap h4{ margin: 10px 0 15px; font-size: 20px; letter-spacing: 5px;}
#co_exterior .wrap .img_box{ margin: 60px auto 0;}
}/*end*/
@media (max-width: 1200px) {
#co_exterior .wrap{ padding: 95px 0 110px; }
#co_exterior .wrap h2{ margin: 0 0 70px; font-size: 22px; letter-spacing: 9px; }
#co_exterior .wrap h4{ margin: 10px 0 15px; font-size: 19px; letter-spacing: 5px;}
#co_exterior .wrap .img_box{ margin: 55px auto 0; width: 90%;}
#co_exterior .wrap .txt_box{ margin: 60px auto 0;}
}/*end*/
@media (max-width: 1000px) {
#co_exterior .wrap{ padding: 95px 0 100px; }
#co_exterior .wrap h2{ margin: 0 0 70px; font-size: 24px; letter-spacing: 9px; }
#co_exterior .wrap h3 br{ display: block;}
#co_exterior .wrap h4{ margin: 10px 0 15px; font-size: 18px; letter-spacing: 5px;}
}/*end*/
@media (max-width: 640px) {
#co_exterior .wrap{ padding: 80px 0 90px; }
#co_exterior .wrap h2{ margin: 0 0 60px; font-size: 22px; letter-spacing: 9px; }
#co_exterior .wrap h4{ margin: 10px 0 15px; font-size: 17px; letter-spacing: 4px;}
#co_exterior .wrap .txt_box{ margin: 50px auto 0;}
#co_exterior .wrap .img_box{ margin: 50px auto 0; width: 100%;}
}/*end*/
@media (max-width: 450px) {
#co_exterior .wrap{ padding: 70px 0 80px; }
#co_exterior .wrap h2{ margin: 0 0 50px; font-size: 20px; letter-spacing: 7px; }
#co_exterior .wrap h4{ margin: 10px 0 15px; font-size: 16px; letter-spacing: 3px;}
#co_exterior .wrap .txt_box{ margin: 40px auto 0;}
#co_exterior .wrap .img_box{ margin: 45px auto 0; width: 100%;}
}/*end*/
.h2_bar{ margin: 0 auto; padding: 0 10px 0 15px; display: inline-block; position: relative; text-align: center; display: inline-block;}
.h2_bar::before,
.h2_bar::after{ position: absolute; top: 50%; content: ''; display: block; width: 21px; height: 1px; background: #7f7f7f; }
.h2_bar::before{ right: 100%; }
.h2_bar::after{ left: 100%; }
@media (max-width: 1000px) {
.h2_bar{ margin: 0 auto; padding: 0 10px 0 15px; display: inline-block; position: relative; text-align: center; display: inline-block;}
}/*end*/

/*-------- ext_03 [ color ] --------*/
.ext_03 h3 { width: 90%; margin: 0 auto;}
.ext_03 h3 br{ display: none !important; }
@media (max-width: 800px) {
.ext_03 h3 br{ display: block !important; }
}/*end*/

/*-------- ext_04 [ color ] --------*/
.ext_04 ul{ width: 90%; max-width: 1150px; margin: 70px auto 0;}
.ext_04 ul li{ display: flex;}
.ext_04 ul li:nth-child(even){ display: flex;  flex-direction : row-reverse;}
.ext_04 ul li .li_img_box{ width: 50%;}
.ext_04 ul li .li_txt_box{ width: 50%;display: flex; align-items: center; justify-content: center;}
.ext_04 ul li .li_txt_box .txt_box_inner{ width: 62%; margin: 0 auto; text-align: center;}
.ext_04 ul li .li_txt_box .txt_box_inner p{ text-align: left;}
@media (max-width: 1400px) {
.ext_04 ul{ width: 90%; margin: 60px auto 0;}
}/*end*/
@media (max-width: 1200px) {
.ext_04 ul{ width: 90%; margin: 55px auto 0;}
}/*end*/
@media (max-width: 1000px) {
.ext_04 ul{ width: 90%; margin: 55px auto 0;}
.ext_04 ul li{ display: block;}
.ext_04 ul li:nth-child(even){ margin-top: 100px; display: block; }
.ext_04 ul li .li_img_box{ width: 50%; margin: 0 auto;}
.ext_04 ul li .li_txt_box{ margin-top: 40px; width: 100%;display: block; }
.ext_04 ul li .li_txt_box .txt_box_inner{ width: 80%; }
}/*end*/
@media (max-width: 640px) {
.ext_04 ul li .li_img_box{ width: 70%; margin: 0 auto;}
.ext_04 ul li .li_txt_box .txt_box_inner{ width: 90%; }
}/*end*/
/*-------- ext_06 [ color ] --------*/
.ext_06 h3 { width: 90%; margin: 0 auto;}
.ext_06 h3 .ext_06_br1{ display: block !important; }
.ext_06 h3 .ext_06_br2{ display: none !important; }
.ext_06 h3 .ext_06_br3{ display: none !important; }
@media (max-width: 1020px) {
.ext_06 h3 .ext_06_br1{ display: block !important; }
.ext_06 h3 .ext_06_br2{ display: block !important; }
.ext_06 h3 .ext_06_br3{ display: none !important; }
}/*end*/
@media (max-width: 800px) {
.ext_06 h3 .ext_06_br1{ display: block !important; }
.ext_06 h3 .ext_06_br2{ display: block !important; }
.ext_06 h3 .ext_06_br3{ display: block !important; }
}/*end*/
/*-------- ext_07 [ color ] --------*/
.ext_07 h3 { width: 90%; margin: 0 auto;}
.ext_07 h3 .ext_07_br1{ display: block !important; }
.ext_07 h3 .ext_07_br2{ display: none !important; }
.ext_07 h3 .ext_07_br3{ display: none !important; }
@media (max-width: 860px) {
.ext_07 h3 .ext_07_br1{ display: block !important; }
.ext_07 h3 .ext_07_br2{ display: block !important; }
.ext_07 h3 .ext_07_br3{ display: none !important; }
}/*end*/
@media (max-width: 800px) {
.ext_07 h3 .ext_07_br1{ display: block !important; }
.ext_07 h3 .ext_07_br2{ display: block !important; }
.ext_07 h3 .ext_07_br3{ display: block !important; }
}/*end*/

/*-------- ext_08 [ color ] --------*/
.ext_08_br1{ display: block !important; }
.ext_08_br2{ display: none !important; }
@media (max-width: 640px) {
.ext_08_br1{ display: block !important; }
.ext_08_br2{ display: block !important; }
}/*end*/

/*-------- ext_08 [ color ] --------*/
.ext_end{ width: 90%; margin: 0 auto; padding: 100px 0 80px; text-align: center; }
.ext_end p br{ display: block !important; }
@media (max-width: 970px) {
.ext_end p br{ display: none !important; }
.ext_end{ width: 90%; margin: 0 auto; padding: 80px 0 70px; text-align: left; }
}/*end*/
@media (max-width: 640px) {
.ext_end p br{ display: none !important; }
.ext_end{ width: 90%; margin: 0 auto; padding: 70px 0 70px; text-align: left; }
}/*end*/
.bg_col{background: #f5f5f5;}


/*-------------------------------------------------
	topics  一つの場合[.one]
--------------------------------------------------*/
#topics.one{ margin-top: 90px; margin-top: 100px; padding: 40px 0 40px; background: #f2f2f2; margin-bottom: 30px; display: block; }
#topics.one .inner{ width: 90%; margin: 0 auto; }
@media (max-width: 1400px){
#topics.one .inner{ width: 90%; margin: 0 auto; }
}/*END*/
#topics.one .inner ul li{ padding: 12px 0 13px; display: flex; }
#topics.one .inner ul li .data{ display: flex; }
#topics.one .inner ul li a{ color: #000; text-decoration: none;}
#topics.one .inner ul li a:hover{ color: #999;}
#topics.one .inner ul li .date p{ margin-top: 5px; font-size: 12px; line-height: 1.5; white-space: nowrap; opacity: 0.5; }
#topics.one .inner ul li .category p{  margin: 4px 20px ; font-size: 12px; line-height: 1.4; letter-spacing: 1px; text-align: center; width: 85px; padding: 2px 0; background: #999999; color: #fff;}
#topics.one .inner ul li .topics_txt p{ margin-top: 3px; font-size: 14px; line-height: 1.5; }
.top_topics_bottom{ height: 30px; }
@media (max-width: 1000px){
#topics.one{ padding: 35px 0 35px; }
#topics.one .inner{ max-width: 900px; width: 85%; margin: 0 auto; }
#topics.one .inner ul li{ padding: 14px 0 16px; display: flex; }
.top_topics_bottom{ height: 20px; }
}/*END*/
@media (max-width: 750px){
#topics.one .inner{ max-width: 900px; width: 90%; margin: 0 auto; }
}/*END*/
@media (max-width: 500px){
#topics.one{ padding: 30px 0; }
#topics.one .inner ul li{ padding: 14px 0 16px; display: block; }
}/*END*/

/* mt_topics */
.mt_topics{ margin-top: 90px;}
@media (max-width: 1400px){
.mt_topics{ margin-top: 90px;}
}/*END*/
@media (max-width: 950px){
.mt_topics{ margin-top: 9.5vw;}
}/*END*/
@media (max-width: 700px){
.mt_topics{ margin-top: 16vw;}
}/*END*/
@media (max-width: 500px){
.mt_topics{ margin-top: 17vw;}
}/*END*/


/*-------------------------------------------------
	topics  複数の場合 [.multiple]
--------------------------------------------------*/
#topics.multiple { margin-top: 90px; padding: 40px 0 50px; background: #f2f2f2; margin-bottom: 30px; display: block; }
#topics.multiple .inner{ max-width: 1100px; width: 80%; margin: 0 auto; }
@media (max-width: 1400px){
#topics.multiple .inner{ max-width: 1000px; width: 85%; margin: 0 auto; }
}/*END*/
#topics.multiple .inner ul li{ padding: 12px 0 13px; border-bottom: solid 1px rgba(0,0,0,0.2); display: flex; }
#topics.multiple .inner ul li .data{ display: flex; }
#topics.multiple .inner ul li  a{ color: #000; text-decoration: none;}
#topics.multiple .inner ul li  a:hover{ color: #999;}
#topics.multiple .inner ul li .date p{ margin-top: 5px; font-size: 12px; line-height: 1.5; white-space: nowrap; opacity: 0.5; }
#topics.multiple .inner ul li .category p{  margin: 4px 20px ; font-size: 12px; line-height: 1.4; letter-spacing: 1px; text-align: center; width: 85px; padding: 2px 0; background: #999999; color: #fff;}
#topics.multiple .inner ul li .topics_txt p{ margin-top: 3px; font-size: 14px; line-height: 1.5; }
.top_topics_bottom{ height: 30px; }
@media (max-width: 1000px){
#topics.multiple { padding: 20px 0 35px; }
#topics.multiple .inner{ max-width: 900px; width: 85%; margin: 0 auto; }
#topics.multiple .inner ul li{ padding: 14px 0 16px; display: block; }
.top_topics_bottom{ height: 20px; }
}/*END*/
@media (max-width: 750px){
#topics.multiple .inner{ max-width: 900px; width: 90%; margin: 0 auto; }
}/*END*/


/*-------- interview_top [ btn ] --------*/
.interview_top{ padding: 120px 0;margin: 0 auto; max-width: 1000px; width: 80%;}
.interview_top a{ position: relative; color: #fff; display: inline-block; overflow: hidden;}
.interview_top a .txt_box{ position: absolute; left: 0%; top: 0px; height: 100%; width: 100%; display: flex; align-items: center; }
.interview_top a .txt_box .inner{ font-size: 18px; line-height: 1.4; position: relative; display: flex; width: 88%; margin: 0 auto; }
.interview_top a .txt_box .inner .link_arrow_back{ position: relative; z-index: 10; width: 15px; margin-right: 5%;}
.interview_top a .interview_top_img{ position: relative; z-index: -1; transition: 1s;}
.interview_top a:hover .interview_top_img{transform: scale(1.1)}
@media (max-width: 1200px) {
.interview_top a .txt_box .inner{ font-size: 16px; }
}/*end*/
@media (max-width: 1024px) {
.interview_top a .txt_box .inner{ font-size: 18px; }
}/*end*/
@media (max-width: 1000px) {
.interview_top{ padding: 90px 0;}
}/*end*/
@media (max-width: 700px) {
.interview_top{ padding: 60px 0 50px; margin: 0 auto; max-width: 1000px; width: 80%;}
.interview_top a .txt_box .inner{ font-size: 2.6vw; }
.interview_top a .txt_box .inner .link_arrow_back{ position: relative; z-index: 10; width: 2vw; margin-right: 5%;}
}/*end*/


.his_txt_m { margin-top: 30px !important;}
.his_txt_m1 { margin-top: 25px !important;}
.his_txt_m2 { margin-top: 60px !important;}
.his_txt_m3 { margin-top: 60px !important; }
@media (max-width: 640px) {
.his_txt_m { margin-top: 30px !important;}
.his_txt_m1 { margin-top: 20px !important;}
.his_txt_m2 { margin-top: 50px !important;}
.his_txt_m3 { margin-top: 40px !important;}
}/*end*/
@media (max-width: 450px) {
.his_txt_m { margin-top: 25px !important;}
.his_txt_m1 { margin-top: 20px !important;}
.his_txt_m2 { margin-top: 40px !important;}
.his_txt_m3 { margin-top: 30px !important;}
}/*end*/