.alignC { text-align: center !important; }

.alignR { text-align: right !important; }

.alignT { vertical-align: top !important; }

.alignM { vertical-align: middle !important; }

.alignB { vertical-align: bottom !important; }

.mt10 { margin-top: 10px !important; }

.mt20 { margin-top: 20px !important; }

.mt30 { margin-top: 30px !important; }

.mt40 { margin-top: 40px !important; }

.mt50 { margin-top: 50px !important; }

.mt60 { margin-top: 60px !important; }

.mt70 { margin-top: 70px !important; }

.mt80 { margin-top: 80px !important; }

.mt90 { margin-top: 90px !important; }

.mt100 { margin-top: 100px !important; }

.mt110 { margin-top: 110px !important; }

.mt120 { margin-top: 120px !important; }

.mt130 { margin-top: 130px !important; }

.mt140 { margin-top: 140px !important; }

.mt150 { margin-top: 150px !important; }

.mt160 { margin-top: 160px !important; }

.mt170 { margin-top: 170px !important; }

.mt180 { margin-top: 180px !important; }

.mt190 { margin-top: 190px !important; }

.mt200 { margin-top: 200px !important; }

.mb10 { margin-bottom: 10px !important; }

.mb20 { margin-bottom: 20px !important; }

.mb30 { margin-bottom: 30px !important; }

.mb40 { margin-bottom: 40px !important; }

.mb50 { margin-bottom: 50px !important; }

.mb60 { margin-bottom: 60px !important; }

.mb70 { margin-bottom: 70px !important; }

.mb80 { margin-bottom: 80px !important; }

.mb90 { margin-bottom: 90px !important; }

.mb100 { margin-bottom: 100px !important; }

.mb110 { margin-bottom: 110px !important; }

.mb120 { margin-bottom: 120px !important; }

.mb130 { margin-bottom: 130px !important; }

.mb140 { margin-bottom: 140px !important; }

.mb150 { margin-bottom: 150px !important; }

.mb160 { margin-bottom: 160px !important; }

.mb170 { margin-bottom: 170px !important; }

.mb180 { margin-bottom: 180px !important; }

.mb190 { margin-bottom: 190px !important; }

.mb200 { margin-bottom: 200px !important; }

.font10 { font-size: 10px !important; }

.font12 { font-size: 12px !important; }

.font14 { font-size: 14px !important; }

.font16 { font-size: 16px !important; }

.font18 { font-size: 18px !important; }

.font20 { font-size: 20px !important; }

.font22 { font-size: 22px !important; }

.font24 { font-size: 24px !important; }

.font26 { font-size: 26px !important; }

.font28 { font-size: 28px !important; }

.white { color: #fff !important; }

.red { color: #FF0505 !important; }

.blue { color: #0A509A !important; }

body, h1, h2, h3, h4, h5, h6, div, p, dt, dd, li, th, td, input, textarea, select, option, a:link, a:visited, a:hover, a:active { color: #000; letter-spacing: 0; }

body { /*	background-color: #f8f8f8;*/ }

#wrap { width: 1200px; margin: 0 auto; background: #fff; }

a:hover { transition: 0.5s; opacity: 0.7; }

/*==================================================
header
==================================================*/
header { position: relative; width: 1200px; height: 119px; margin: 0 auto; background: #0067B7; }
header .logo { position: absolute; top: 9px; left: 44px; width: 314px; }
header .logo img { width: 314px; height: 98px; }
header .menu-btn { position: absolute; top: 30px; right: 38px; }

/*==================================================
menu
==================================================*/
.menu-btn { display: flex; width: 525px; justify-content: space-between; }
.menu-btn li { flex-basis: 255px; height: 58px; }
.menu-btn li a { display: block; width: 250px; padding: 15px 0 15px 0px; text-align: center; color: #274890; font-size: 25px; font-weight: 800; line-height: 1; background-color: rgb(251, 255, 0); background-repeat: no-repeat; border-radius: 14px; box-shadow: 4px 4px 10px -2px #000; }
/* .menu-btn li:nth-child(1) a { background-image: url("../img/common/ico_reserve.svg"); background-size: 86px auto; background-position: 140px 60%; }
.menu-btn li:nth-child(2) a { background-image: url("../img/common/ico_contact.svg"); background-size: 48px auto; background-position: 180px 50%; } */

.menu { display: flex; justify-content: center; text-align: center; }
.menu li { text-align: center; }
.menu a { display: block; padding: 0 35px 0 39px; font-size: 16px; line-height: 1; letter-spacing: 0.1em; white-space: nowrap; }

#global .menu { margin: 30px 0 120px; }
#global .menu li a { border-left: 1px solid #000; }
#global .menu li:last-child a { border-right: 1px solid #000; }
#global .menu a { color: #000; }
#global .menu li::after { display: inline; font-size: 9px; color: #A28357; }
#global .menu li:nth-child(1)::after { content: 'HOME'; }
#global .menu li:nth-child(2)::after { content: 'The service charge'; }
#global .menu li:nth-child(3)::after { content: 'Correspondence area'; }
#global .menu li:nth-child(4)::after { content: 'Question'; }
#global .menu li:nth-child(5)::after { content: "Customer's voice"; }
#global .menu li:nth-child(6)::after { content: "Company's outline"; }

footer .menu li { border-left: 1px solid #fff; }
footer .menu li:last-child { border-right: 1px solid #fff; }
footer .menu a { color: #fff; }

/*==================================================
footer
==================================================*/
footer { position: relative; width: 1200px; margin: 0 auto; background: #0067B7; }
footer .map { width: 1200px; height: 370px; }
footer .logo { padding: 40px 0 20px; text-align: center; }
footer .data { display: flex; justify-content: center; align-items: flex-end; }
footer .data li { padding: 0 20px; font-size: 14px; color: #fff; }
footer .data li:nth-child(2) { font-size: 24px; line-height: 1; letter-spacing: 0.05em; }
footer .data li:nth-child(2) img { margin-right: 2px; width: 26px; vertical-align: baseline; }
footer .sns { display: flex; justify-content: center; margin: 20px 0; padding: 10px; background: #fff; }
footer .sns li { flex-basis: 60px; padding: 0 5px; }
footer .sns img { width: 60px; }
footer .menu-btn { margin: 25px auto 80px; }
footer .copy { margin: 40px 0 0; padding-bottom: 22px; text-align: center; font-size: 10px; color: #fff; }

/*footer::after { content: ''; display: block; position: absolute; top: 410px; right: 50px; width: 235px; height: 235px; background: url(../img/common/foot_pic.png) 0 0; }*/

/*==================================================
layout parts
==================================================*/
main section > .inner { margin: 0 auto; padding: 1px 0; }
main section p { font-size: 14px; font-weight: 300; line-height: 1.8; }
main section em { color: inherit; }
main section .small { font-size: 80%; }

.bg-blue { background: #0067B7; }

.bg-green { background: #D0E5DC; }

.bg-dot { background: url("../img/common/bg_dot.gif") 0 0; }

/*==================================================
visual
==================================================*/
#visual { width: 1200px; margin: 0 auto; }

/*==================================================
title
==================================================*/
.tit-hex { width: 436px; height: 61px; margin: 0 auto; text-align: center; font-size: 28px; line-height: 61px; color: #fff; background: url("../img/common/tit_hex.png") center center no-repeat; background-color: #04509E; background-size: 436px 61px; overflow: hidden; }

/*==================================================
frame
==================================================*/
.frame { width: 930px; margin: 0 auto; padding: 40px; border: 15px solid #E9E8E4; }

/*==================================================
chart
==================================================*/
table.outline { width: 100%; border-top: 1px solid #000; }
table.outline th, table.outline td { padding: 18px 20px; border-bottom: 1px solid #000; }
table.outline th { text-align: left; vertical-align: middle; font-size: 18px; background: #FECC73; }
table.outline td { font-size: 16px; border-left: 1px solid #000; }

/*==================================================
talent
==================================================*/
.talent1 { position: relative; width: 1200px; }
.talent1 .kojimasan { position: absolute; top: 64px; right: -30px; }

.talent2 { padding: 40px 0 0; background: linear-gradient(#59a7c9 0%, #fff 50%); }
.talent2 .kojimasan { position: relative; top: 5px; text-align: center; }

.talent3 h2 { margin-bottom: -290px; }
.talent3 .bg-dot { width: 1100px; margin: 0 auto; position: relative; z-index: 2; }

.talent4 { position: relative; width: 1200px; }
.talent4 .kojimasan { position: absolute; top: 170px; right: 10px; }

/*==================================================
top
==================================================*/
.column { display: flex; width: 930px; height: 338px; margin: 0 auto 10px; overflow: hidden; }
.column.reverse { flex-direction: row-reverse; }
.column .item-pic { flex-basis: 496px; overflow: hidden; }
.column .item-pic img { width: 498px; height: auto; }
.column .item-txt { flex-basis: 434px; padding: 0 40px; }
.column .item-txt .tit { margin-bottom: 15px; padding: 60px 0 10px; text-align: center; font-size: 27px; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
.column .item-txt .txt { text-align: center; color: #fff; font-size: 17px; }
.column .item-txt .btn { margin: 30px 0 0; }
.column .item-txt .btn a { position: relative; display: block; width: 255px; margin: 0 auto; padding: 18px 0 18px 30px; text-align: left; color: #274890; font-size: 21px; line-height: 1; background-color: #fff; background-repeat: no-repeat; border-radius: 14px; box-shadow: 4px 4px 10px -2px #000; }
.column .item-txt .btn a::after { position: absolute; top: 21px; right: 25px; content: ''; display: block; width: 45px; height: 14px; border-bottom: 2px solid #FF8001; border-right: 3px solid #FF8001; transform: skew(45deg); }
.column#no1 .item-txt { background: linear-gradient(90deg, #FF4D01 0%, #FF6601 50%, #FF4D01 100%); }
.column#no2 .item-txt { background: linear-gradient(90deg, #FF8001 0%, #FF9901 50%, #FF8001 100%); }
.column#no3 .item-txt { background: linear-gradient(90deg, #0F218B 0%, #0C419A 50%, #0F218B 100%); }
.column#no4 .item-txt { background: linear-gradient(90deg, #0670B0 0%, #0580B7 50%, #0670B0 100%); }
.column#no1 .btn a, .column#no2 .btn a { color: #FF8001; }
.column#no3 .btn a::after, .column#no4 .btn a::after { border-color: #274890; }

.movie { padding: 40px 0 20px; }
.movie iframe { display: block; width: 854px; margin: 30px auto 0; }

/*==================================================
service
==================================================*/
.cause { display: flex; justify-content: space-between; align-items: stretch; width: 1000px; margin: 0 auto; padding-top: 50px; flex-wrap: wrap; }
.cause li { flex-basis: calc( 50% - 20px ); margin-bottom: 40px; font-size: 16px; }
.cause li img { display: block; width: 100%; margin-bottom: 10px; }

/*==================================================
area
==================================================*/
#area .tit-hex { background-color: #454545; }

.area-chart { width: 480px; margin: 0 auto; border-top: 1px solid #000; border-left: 1px solid #000; }
.area-chart caption { position: relative; width: 480px; margin: 0 0 20px; padding: 10px 0; font-size: 18px; font-weight: normal; line-height: 1; color: #fff; text-align: center; background: #FF4D01; }
.area-chart caption:after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 10px solid transparent; border-top: 10px solid #FF4D01; }
.area-chart th, .area-chart td { padding: 12px 10px 12px 15px; font-size: 14px; border-right: 1px solid #000; border-bottom: 1px solid #000; }
.area-chart th { text-align: left; vertical-align: middle; background: #C9C9C9; }
.area-chart td { color: #FF4D01; }

/*==================================================
faq
==================================================*/
#faq .tit-hex { background-color: #4682C1; }

.faq li { margin-bottom: 30px; }
.faq .que { position: relative; display: table; width: 100%; border: 2px solid #000; cursor: pointer; }
.faq .que dt { display: table-cell; width: 60px; padding: 10px 0; text-align: center; vertical-align: middle; font-size: 28px; font-weight: bold; color: #fff; background: #FF4D01; }
.faq .que dd { display: table-cell; padding: 10px 80px 10px 20px; font-size: 16px; vertical-align: middle; }
.faq .que::after { position: absolute; top: 50%; width: 50px; margin-top: -22px; right: 10px; content: '+'; display: block; text-align: center; font-size: 40px; line-height: 1; }
.faq .que.active::after { content: '-'; }
.faq .ans { display: none; margin-top: 10px; padding: 0 20px; }
.faq .ans dt { margin-bottom: 5px; font-size: 20px; }
.faq .ans dt strong { padding-right: 10px; font-size: 28px; color: #FF4D01; }
.faq .ans dd { font-size: 16px; line-height: 1.8; }

/*==================================================
voice
==================================================*/
#voice .tit-hex { background-color: #6EB23B; }

#voice .bg-green { padding: 30px 0 10px; }

.voice-list { display: flex; justify-content: space-between; width: 965px; margin: 0 auto 20px; }
.voice-list .item { flex-basis: 455px; padding: 20px 20px 0; border: 7px solid #fff; background: #C6E0E0; }
.voice-list .item .data { margin-bottom: 30px; }
.voice-list .item .data dt, .voice-list .item .data dd { padding-left: 4px; }
.voice-list .item .data dt.date { margin-bottom: 5px; font-size: 13px; }
.voice-list .item .data dd.name { margin-bottom: 15px; padding-bottom: 6px; font-size: 14px; border-bottom: 2px solid #FFFFFF; }
.voice-list .item .data dt:not(.date) { margin-bottom: 3px; padding-bottom: 3px; font-size: 10px; font-weight: bold; border-bottom: 1px solid #FFFFFF; }
.voice-list .item .data dd:not(.name) { margin-bottom: 10px; font-size: 11px; }
.voice-list .item ul li { margin-bottom: 20px; overflow: hidden; }
.voice-list .item ul li img { float: left; }
.voice-list .item ul li dl { float: right; width: 260px; }
.voice-list .item ul li dt { margin-bottom: 5px; font-size: 11px; font-weight: bold; }
.voice-list .item ul li dd { font-size: 10px; }

/*==================================================
company
==================================================*/
.message { display: flex; justify-content: space-between; width: 970px; margin: 0 auto; }
.message .pic { flex-basis: 296px; margin-right: 30px; }
.message .txt h2 { margin: 20px 0 45px; line-height: 1; }

/*==================================================
contact
==================================================*/
#contact .form { width: 830px; margin: 0 auto; padding: 40px 40px; background: #f7fae9; }
#contact table { width: 730px; margin: 0 auto; }
#contact table th { width: 255px; padding-bottom: 28px; vertical-align: middle; text-align: left; font-size: 18px; letter-spacing: 0.1em; color: #000; }
#contact table th em { position: relative; top: 0px; left: 5px; display: inline-block; padding: 4px 8px; font-size: 14px; line-height: 1; color: #fff; background: #942c33; border-radius: 6px; }
#contact table td { padding-bottom: 28px; font-size: 18px; letter-spacing: 0.1em; }
#contact table td.check-cell { line-height: 2; }
#contact table input[type="text"], #contact table input[type="tel"], #contact table input[type="email"], #contact table textarea { width: 100%; padding: 8px 10px; border: none; font-size: 18px; letter-spacing: 0.1em; -webkit-appearance: none; }
#contact table input[type="radio"], #contact table input[type="checkbox"] { margin-right: 10px; }
#contact table input::placeholder { color: #999; }
#contact .btn { margin-top: 20px; text-align: center; }
#contact .btn input { display: inline-block; margin: 0 10px; padding: 12px 16px; color: #fff; font-size: 24px; line-height: 1; border: none; border-radius: 8px; background: #0067B7; }