@charset "UTF-8";

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
@media only screen and (min-width: 750px) {
.pc { display: block !important; }
.sp { display: none !important; }
}
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
.pc { display: none !important; }
.sp { display: block !important; }
}

/* br_pc　pc時改行 */
/* br_sp　sp時改行 */
@media screen and (min-width: 750px){
  .br-pc { display:block; }
  .br-sp { display:none; }
}
@media screen and (max-width: 750px){
  .br-pc { display:none; }
  .br-sp { display:block; }
}


body{
	text-align:center;
	font-size:85%;
}
@media screen and (max-width: 769px) {
body{
	min-width: inherit;
}
}
a:focus, *:focus { outline:none; }

p{
	margin:0;
	line-height: 2em;
}

ul{
	margin:0;
	padding:0;
}

a{
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}

a:hover{
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}

a.btn{
background: #000;
color: #fff;
padding: 20px 50px;
-webkit-border-radius: 50px;
-moz-border-radius:50px;
border-radius:50px;
}

a.btn:hover{
background: #e60012;
}

a.btn_list{
background: #000;
color: #fff;
padding: 20px 50px;
-webkit-border-radius: 50px;
-moz-border-radius:50px;
border-radius:50px;
}

a.btn_list:after{
content: "";
width: 13px;
height: 10px;
background-image: url(../../images/common/icon_list.png);
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
margin-left: 5px;
}

a.btn_list:hover{
background: #e60012;
}
/*******************************
 
CommandCss
 
*******************************/
.red      { color: #e00 !important; }
.blue     { color: #00F !important; }
.green    { color: #0F0 !important; }
.yellow   { color: #FF0 !important; }
.orange   { color: #F90 !important; }
.white    { color: #FFF !important; }
.black    { color: #000 !important; }
.gray     { color: #888 !important; }

.m0  { margin: 0    !important; }
.m5  { margin: 5px  !important; }
.m10 { margin: 10px !important; }
.m15 { margin: 15px !important; }
.m20 { margin: 20px !important; }
.m25 { margin: 25px !important; }
.m30 { margin: 30px !important; }
.m35 { margin: 35px !important; }
.m40 { margin: 40px !important; }
.m45 { margin: 45px !important; }
.m50 { margin: 50px !important; }
.m60 { margin: 60px !important; }
.m70 { margin: 70px !important; }
.m80 { margin: 80px !important; }
.m90 { margin: 90px !important; }
.m100 { margin: 100px !important; }

.mt0  { margin-top: 0    !important; }
.mt5  { margin-top: 5px  !important; }
.mt10 { margin-top: 10px !important; }
.mt15 { margin-top: 15px !important; }
.mt20 { margin-top: 20px !important; }
.mt25 { margin-top: 25px !important; }
.mt30 { margin-top: 30px !important; }
.mt35 { margin-top: 35px !important; }
.mt40 { margin-top: 40px !important; }
.mt45 { margin-top: 45px !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; }

.mr0  { margin-right: 0    !important; }
.mr5  { margin-right: 5px  !important; }
.mr10 { margin-right: 10px !important; }
.mr15 { margin-right: 15px !important; }
.mr20 { margin-right: 20px !important; }
.mr25 { margin-right: 25px !important; }
.mr30 { margin-right: 30px !important; }
.mr35 { margin-right: 35px !important; }
.mr40 { margin-right: 40px !important; }
.mr45 { margin-right: 45px !important; }
.mr50 { margin-right: 50px !important; }
.mr60 { margin-right: 60px !important; }
.mr70 { margin-right: 70px !important; }
.mr80 { margin-right: 80px !important; }
.mr90 { margin-right: 90px !important; }
.mr100 { margin-right: 100px !important; }

.mb0  { margin-bottom: 0    !important; }
.mb5  { margin-bottom: 5px  !important; }
.mb10 { margin-bottom: 10px !important; }
.mb15 { margin-bottom: 15px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb25 { margin-bottom: 25px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb35 { margin-bottom: 35px !important; }
.mb40 { margin-bottom: 40px !important; }
.mb45 { margin-bottom: 45px !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; }

.ml0  { margin-left: 0    !important; }
.ml5  { margin-left: 5px  !important; }
.ml10 { margin-left: 10px !important; }
.ml15 { margin-left: 15px !important; }
.ml20 { margin-left: 20px !important; }
.ml25 { margin-left: 25px !important; }
.ml30 { margin-left: 30px !important; }
.ml35 { margin-left: 35px !important; }
.ml40 { margin-left: 40px !important; }
.ml45 { margin-left: 45px !important; }
.ml50 { margin-left: 50px !important; }
.ml60 { margin-left: 60px !important; }
.ml70 { margin-left: 70px !important; }
.ml80 { margin-left: 80px !important; }
.ml90 { margin-left: 90px !important; }
.ml100 { margin-left: 100px !important; }

.p0  { padding: 0    !important; }
.p5  { padding: 5px  !important; }
.p10 { padding: 10px !important; }
.p15 { padding: 15px !important; }
.p20 { padding: 20px !important; }
.p25 { padding: 25px !important; }
.p30 { padding: 30px !important; }
.p35 { padding: 35px !important; }
.p40 { padding: 40px !important; }
.p45 { padding: 45px !important; }
.p50 { padding: 50px !important; }
.p60 { padding: 60px !important; }
.p70 { padding: 70px !important; }
.p80 { padding: 80px !important; }
.p90 { padding: 90px !important; }
.p100 { padding: 100px !important; }

.pt0  { padding-top: 0    !important; }
.pt5  { padding-top: 5px  !important; }
.pt10 { padding-top: 10px !important; }
.pt15 { padding-top: 15px !important; }
.pt20 { padding-top: 20px !important; }
.pt25 { padding-top: 25px !important; }
.pt30 { padding-top: 30px !important; }
.pt35 { padding-top: 35px !important; }
.pt40 { padding-top: 40px !important; }
.pt45 { padding-top: 45px !important; }
.pt50 { padding-top: 50px !important; }
.pt60 { padding-top: 60px !important; }
.pt70 { padding-top: 70px !important; }
.pt80 { padding-top: 80px !important; }
.pt90 { padding-top: 90px !important; }
.pt100 { padding-top: 100px !important; }

.pr0  { padding-right: 0    !important; }
.pr5  { padding-right: 5px  !important; }
.pr10 { padding-right: 10px !important; }
.pr15 { padding-right: 15px !important; }
.pr20 { padding-right: 20px !important; }
.pr25 { padding-right: 25px !important; }
.pr30 { padding-right: 30px !important; }
.pr35 { padding-right: 35px !important; }
.pr40 { padding-right: 40px !important; }
.pr45 { padding-right: 45px !important; }
.pr50 { padding-right: 50px !important; }
.pr60 { padding-right: 60px !important; }
.pr70 { padding-right: 70px !important; }
.pr80 { padding-right: 80px !important; }
.pr90 { padding-right: 90px !important; }
.pr100 { padding-right: 100px !important; }

.pb0  { padding-bottom: 0    !important; }
.pb5  { padding-bottom: 5px  !important; }
.pb10 { padding-bottom: 10px !important; }
.pb15 { padding-bottom: 15px !important; }
.pb20 { padding-bottom: 20px !important; }
.pb25 { padding-bottom: 25px !important; }
.pb30 { padding-bottom: 30px !important; }
.pb35 { padding-bottom: 35px !important; }
.pb40 { padding-bottom: 40px !important; }
.pb45 { padding-bottom: 45px !important; }
.pb50 { padding-bottom: 50px !important; }
.pb60 { padding-bottom: 60px !important; }
.pb70 { padding-bottom: 70px !important; }
.pb80 { padding-bottom: 80px !important; }
.pb90 { padding-bottom: 90px !important; }
.pb100 { padding-bottom: 100px !important; }

.pl0  { padding-left: 0    !important; }
.pl5  { padding-left: 5px  !important; }
.pl10 { padding-left: 10px !important; }
.pl15 { padding-left: 15px !important; }
.pl20 { padding-left: 20px !important; }
.pl25 { padding-left: 25px !important; }
.pl30 { padding-left: 30px !important; }
.pl35 { padding-left: 35px !important; }
.pl40 { padding-left: 40px !important; }
.pl45 { padding-left: 45px !important; }
.pl50 { padding-left: 50px !important; }
.pl60 { padding-left: 60px !important; }
.pl70 { padding-left: 70px !important; }
.pl80 { padding-left: 80px !important; }
.pl90 { padding-left: 90px !important; }
.pl100 { padding-left: 100px !important; }


.clearb{clear:both;}
.bnone{ border:none!important;}

.txtright{text-align:right; width:100%;}
.txtleft{text-align:left; width:100%;}
.txtcenter{text-align:center; width:100%;}
.float_r{float:right; display:inline;}
.float_l{float:left; display:inline;}
.vtop{ vertical-align:top;}
.imgover{}

#topback{
	bottom: 0;
	right:0;
	position: fixed;
	z-index: 49;
	cursor: pointer;
	display:none;
}

#topback img{
width: 60px;
height: auto;

}


/*******************************
 
baseCss
 
*******************************/
.builder{
	width:90%;
	max-width: 988px;
	margin:0 auto;
	text-align:left;
}


@media screen and (max-width: 769px) {
.builder{
	width:90%;
	margin:0 5%;
	text-align:left;
}

}

.fadeUp{
opacity: 0;
-webkit-transform: translateY(50px);
transform: translateY(50px);
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
transition: 1s;
}

.fadeUp.view{
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}

#loading {
    width: 100%;
    height: 100%;
    margin: 0;
    background: #fff;
    opacity: 1.0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

.loader {
	position: absolute;
	top: calc(50% - 25px);
	left: calc(50% - 25px);
  font-size: 10px;
  text-indent: -9999em;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #3dd961;
  background: -moz-linear-gradient(left, #0571ba 10%, rgba(5,113,186, 0) 42%);
  background: -webkit-linear-gradient(left, #0571ba 10%, rgba(5,113,186, 0) 42%);
  background: -o-linear-gradient(left, #0571ba 10%, rgba(5,113,186, 0) 42%);
  background: -ms-linear-gradient(left, #0571ba 10%, rgba(5,113,186, 0) 42%);
  background: linear-gradient(to right, #0571ba 10%, rgba(5,113,186, 0) 42%);
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
}
.loader:before {
  width: 50%;
  height: 50%;
  background: #0571ba;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}
.loader:after {
  background: #fff;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@-webkit-keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/*******************************
 
HeadderCss
 
*******************************/
header{
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;

}

header.headTop{
background: #fff;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;

}

header>.layout{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-pack: space-between;
-webkit-box-pack: space-between;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}

header>.layout>.item{
flex-basis: 20%;
}

header>.layout>.item:nth-of-type(2){
flex-basis: 80%;
}

header>.layout>.item h1{
display: block;
text-align: left;
padding: 0 15px;
}

header>.layout>.item h1 a>img{
width: 100%;
max-width: 300px;

}

header>.layout>.item:nth-of-type(2) ul{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-pack:flex-end;
-webkit-box-pack:flex-end;
-webkit-justify-content:flex-end;
justify-content:flex-end;
}

header>.layout>.item:nth-of-type(2) ul li{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}

header>.layout>.item:nth-of-type(2) ul li a{
display: block;
background-color: #124098;
color: #fff;
padding: 20px;
}

header>.layout>.item:nth-of-type(2) ul li a:hover{
text-decoration: underline;
}

header>.layout>.item:nth-of-type(2) ul li.mail a {
background: #e70012;
padding: 18px;
}

header>.layout>.item:nth-of-type(2) ul li.mail a img{
width: 36px;
height: auto;
}

header>.layout>.item:nth-of-type(2) ul li.hoverable a:after{
content: "";
width: 11px;
height: 6px;
background-image: url(../../images/common/arrow_down.png);
background-size: contain;
display: inline-block;
margin-left: 5px;
vertical-align: 1px;
}

header>.layout>.item:nth-of-type(2) ul li a.outlink:after{
content: "";
width: 8px;
height: 8px;
background-image: url(../../images/common/icon_other.png);
background-size: contain;
display: inline-block;
margin-left: 5px;
}

header>.layout>.item:nth-of-type(3){
display: none;
}

.spBtn{
position: relative;
z-index: 101;
}

.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}

.menu-trigger {
  position: relative;
  width: 32px;
  height: 26px;
}

.menu-trigger span {
  position: absolute;
  left: 0;
  width: 98%;
  height: 2px;
  background-color: #fff;
}

.menu-trigger.active span,.headTop .menu-trigger span,.under .menu-trigger span{
  background-color: #fff;
}

.menu-trigger span:nth-of-type(1) {
  top: 0;
}

.menu-trigger span:nth-of-type(2) {
  top: 11px;
}

.menu-trigger span:nth-of-type(3) {
background: none;
color: #fff;
height: auto;
bottom: 0;
font-size: 10px;
-webkit-transform: translateY(50%);
transform: translateY(50%);
}

.menu-trigger.active span:nth-of-type(3) ,.headTop .menu-trigger span:nth-of-type(3) ,.under .menu-trigger span:nth-of-type(3){
color: #fff;
}

.menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(12px) rotate(-45deg);
  transform: translateY(6px) rotate(-45deg);
}

.menu-trigger.active span:nth-of-type(2) {
  -webkit-transform: translateY(-14px) rotate(45deg);
  transform: translateY(-5px) rotate(45deg);
}

.menu-trigger.active span:nth-of-type(3) {
}

.hover{
display: none;
position: fixed;
top: 60px;
right: 0;
width:791px;
margin-left: auto;
background: #eee;
}

.hover:before{
content: "";
width: 0px;
height: 0px;
position: absolute;
top: -10px;
left: 250px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #eee;
}

.hover>.layout{
padding: 20px 30px 10px;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}

.hover>.layout .item{
margin-right: 30px;
}

.hover>.layout .item a{
text-align: left;
display: block;
position: relative;
color: #124098;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}

.hover>.layout .item a:hover{
color: #e70012;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}

.hover>.layout .item a.secondary{
font-size: 14px;
font-weight: bold;
margin-bottom: 15px;
padding-left: 15px;
}

.hover>.layout .item a.secondary:before{
content: "";
width: 10px;
height: 1px;
background: #124098;
position: absolute;
top: 50%;
left: 0;
}

.hover>.layout .item a.tertiary{
font-size: 12px;
font-weight: normal;
margin-bottom: 15px;
margin-left: 15px;
padding-left: 15px;
}

.hover>.layout .item a.tertiary:before{
content: "";
width: 10px;
height: 1px;
background: #124098;
position: absolute;
top: 50%;
left: 0;
}
@media screen and (max-width: 1000px) {
header>.layout>.item:nth-of-type(1){
flex-basis: 40%;
}

header>.layout>.item:nth-of-type(2){
display: none;
}

header>.layout>.item:nth-of-type(3){
flex-basis: 60px;
padding: 15px 0;
display: block;
background: #124098;
}

}

@media screen and (max-width: 480px) {
header>.layout .item:nth-of-type(1){
flex-basis: 80%;
}
}


.sp_navigation{
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 50;
background: #fff;
width: 100vw;
height: 100vh;
margin-left: -100vw;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}

.sp_navigation.show{
margin-left: 0;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}

.sp_navigation ul{
padding-top: 100px;
padding-left: 10%;
padding-right: 10%;
}

.sp_navigation ul li a{
display: block;
text-align: center;
color: #000;
padding: 5px 0 10px;
margin-bottom: 15px;
border-bottom: 1px dotted #ccc;
}
.sp_navigation .mail{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.sp_navigation .mail a{
background: #124098;
color: #fff;
display: block;
text-align: center;
margin-top: 20px;
padding: 20px 0;
}

@media screen and (max-width: 1000px) {
.sp_navigation{
display: block;
}
}

/*******************************
 
FooterCss
 
*******************************/
footer{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-pack: space-between;
-webkit-box-pack: space-between;
-webkit-justify-content: space-between;
justify-content: space-between;
}

footer>.item:nth-of-type(1){
flex-basis: 43%;
background: #e2e4e9;
position: relative;
}

footer>.item:nth-of-type(1):before{
content: "";
width: 100%;
height: 100px;
background: #fff;
position: absolute;
top: 0;
left: 0;
}

footer>.item:nth-of-type(2){
flex-basis: 57%;
background: #124098;
}

footer>.item:nth-of-type(1)>.content{
width: 100%;
max-width: 450px;
margin-left: auto;
padding-top: 180px;
padding-bottom: 100px;
text-align: left;
line-height: 2.8em;
}

footer>.item:nth-of-type(1)>.content img{
width: 60%;
height: auto;
margin-bottom: 40px;
}

footer>.item:nth-of-type(2)>.content{
width: 100%;
max-width: 750px;
margin-left: 0;
margin-right: auto;
}

footer>.item:nth-of-type(2)>.content .sitemap{
padding: 50px 0px 50px 50px;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}

footer>.item:nth-of-type(2)>.content .sitemap .item{
padding-right: 80px;
}

footer>.item:nth-of-type(2)>.content .sitemap .item:nth-of-type(3){
padding-right: 0;
}

footer>.item:nth-of-type(2)>.content .sitemap .item a{
display: block;
color: #fff;
text-align: left;
position: relative;
}

footer>.item:nth-of-type(2)>.content .sitemap .item a:hover{
opacity: 0.6;
}

footer>.item:nth-of-type(2)>.content .sitemap .item a.primary{
font-size: 16px;
font-weight: bold;
margin-bottom: 30px;
}

footer>.item:nth-of-type(2)>.content .sitemap .item a.primary.out:after{
content: "";
width: 8px;
height: 8px;
background-image: url(../../images/common/icon_other.png);
background-size: contain;
display: inline-block;
margin-left: 5px;
}

footer>.item:nth-of-type(2)>.content .sitemap .item a.secondary{
font-size: 14px;
font-weight: bold;
margin-bottom: 15px;
padding-left: 15px;
}

footer>.item:nth-of-type(2)>.content .sitemap .item a.secondary:before{
content: "";
width: 10px;
height: 1px;
background: #fff;
position: absolute;
top: 50%;
left: 0;
}

footer>.item:nth-of-type(2)>.content .sitemap .item a.tertiary{
font-size: 12px;
font-weight: normal;
margin-bottom: 15px;
margin-left: 15px;
padding-left: 15px;
}

footer>.item:nth-of-type(2)>.content .sitemap .item a.tertiary:before{
content: "";
width: 10px;
height: 1px;
background: #fff;
position: absolute;
top: 50%;
left: 0;
}

address{
background: #1c2f56;
display: block;
width: 100%;
padding: 20px 0;
color: #fff;
font-size: 12px;
}

address .layout{
display: block;
width: 100%;
max-width: 1200px;
margin: 0 auto;
text-align: left;
}


@media screen and (max-width: 1200px) {
footer{
display: block;
}

footer>.item:nth-of-type(1):before{
display: none;
}


footer>.item:nth-of-type(1)>.content{
width: auto;
margin-left: 0;
padding-top: 30px;
padding-bottom: 30px;
padding-left: 50px;
padding-right: 50px;
text-align: left;
}

footer>.item:nth-of-type(1)>.content img{
width: 70%;
margin-bottom: 20px;
}

footer>.item:nth-of-type(2)>.content{
margin-left: 0;
margin-right: 0;
}

footer>.item:nth-of-type(2)>.content .sitemap{
padding: 30px 0px 30px 50px;
}

footer>.item:nth-of-type(2)>.content .sitemap .item{
padding-right: 50px;
}

address .layout{
display: block;
width: auto;
padding: 0 50px;
}

}

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

footer>.item:nth-of-type(1)>.content{
padding-left: 10%;
padding-right: 10%;
font-size: 12px;
line-height: 2em;
}

footer>.item:nth-of-type(2){
display: none;
}

address .layout{
display: block;
width: auto;
padding: 0 10%;
font-size: 10px;
}
}



/*******************************
 
UnderCss
 
*******************************/
.under_title{
padding-top: 80px;
padding-bottom: calc(100vw/8);
background-image: url(../../images/common/head_bg.gif);
background-size: 100%;
background-repeat: repeat;
background-position: top left;
text-align: left;
}

.under_title .clumb{
margin-left: 20px;
font-size: 13px;
}

.under_title .clumb a:after{
content: "\f054";
font-family: "Font Awesome 5 Free";
font-weight:200;
font-weight: bold;
font-style: normal;
display: inline-block;
margin-left: 5px;
margin-right: 5px;
color: #000;
}

.under_title h2{
display: block;
color: #124098;
font-size: 48px;
line-height: 1.4em;
font-weight: 900;
padding-top: 80px;
padding-left: 15%;
}

.under_title h2 span{
display: block;
font-size: 16px;
line-height: 1.8em;
}


.under_head{
margin-top: calc(-100vw/10);
margin-bottom: calc(100vw/10);
position: relative;
z-index: 2;
background: #124098;
-webkit-transform: skew(0deg, -20deg);
transform: skew(0deg, -20deg);
}


.under_head .layout{
position: relative;
width:50%;
margin-left: 35%;
text-align: left;
padding-top: calc(100vw/8);
padding-bottom:  calc(100vw/12);
font-size: 14px;
line-height: 2.4em;
color: #fff;
-webkit-transform: skew(0deg, 20deg);
transform: skew(0deg, 20deg);
}

.under_head .layout .txt{
position: relative;
z-index: 1;
}

.under_head .layout .txt .title{
font-size: 24px;
line-height: 1.8em;
display: block;
margin-bottom: 20px;
font-weight: bold;
}

.under_head .layout .txt p{
padding-right: 20%;
}

.under_head .layout .fig{
position: absolute;
top: -25%;
right: 0;
width: 50%;
z-index: 0;
}

.under_head .img{
position: absolute;
top: calc(-100vw / 6.3);
left: 0;
-webkit-transform: skew(0deg, 20deg);
transform: skew(0deg, 20deg);
width: 30%;
}

.under_head .img img{
width: 100%;
height: auto;
}


@media screen and (max-width: 810px) {
.under_title h2{
font-size: 30px;
font-weight: 900;
padding-top: 80px;
padding-left: 10%;
}

.under_title h2 span{
font-size: 12px;
}


.under_head{
margin-top: calc(-100vw/10);
position: relative;
z-index: 2;
background: #124098;
-webkit-transform: skew(0deg, -20deg);
transform: skew(0deg, -20deg);
}


.under_head .layout{
position: relative;
width:80%;
margin-left: 10%;
text-align: left;
padding-top: calc(100vw/6);
padding-bottom:  calc(100vw/6);
font-size: 14px;
line-height: 2.4em;
}

.under_head .layout .txt{
position: relative;
z-index: 1;
}


.under_head .layout .txt p{
padding-right: 0;
}

.under_head .layout .txt .title{
font-size: 24px;
line-height: 1.8em;
display: block;
margin-bottom: 20px;
font-weight: bold;
}

.under_head .layout .fig{
position: absolute;
top: -25%;
right: 0;
width: 40%;
z-index: 0;
}

.under_head .img{
display: none;
}
}

@media screen and (max-width: 480px) {
.under_title h2{
padding-top: 20px;
}
.under_title .clumb{
display: none;
}
.under_head .layout .fig{
position: absolute;
top: -10%;
right: 0;
width: 35%;
z-index: 0;
}
}


h2.sub_title{
display: block;
position: relative;
color: #124098;
font-size: 36px;
line-height: 1.4em;
font-weight: 900;
padding-left: 0;
z-index: 10;
}

h2.sub_title span{
display: block;
font-size: 16px;
line-height: 1.8em;
}

h2.sub_title:before{
content: "";
width: 1px;
height: 60px;
background-color: #124098;
position: absolute;
bottom: -70px;
left: 50%;
}

@media screen and (max-width: 810px) {
h2.sub_title{
padding-top: 30px;
font-size: 21px;
}

h2.sub_title span{
font-size: 14px;
}

h2.sub_title:before{
height: 30px;
bottom: -40px;
}

}


.under_title2{
padding-top: 80px;
padding-bottom: calc(100vw/20);
background-image: url(../../images/common/head_bg.gif);
background-size: 100%;
background-repeat: repeat;
background-position: top left;
text-align: left;
}

.under_title2 .clumb{
margin-left: 20px;
font-size: 13px;
}

.under_title2 .clumb a:after{
content: "\f054";
font-family: "Font Awesome 5 Free";
font-weight:200;
font-weight: bold;
font-style: normal;
display: inline-block;
margin-left: 5px;
margin-right: 5px;
color: #000;
}

.under_title2 h2{
display: block;
color: #124098;
font-size: 48px;
line-height: 1.4em;
font-weight: 900;
padding-top: 40px;
padding-left: 10%;
}

.under_title2 h2 span{
display: block;
font-size: 16px;
line-height: 1.8em;
}


.under_head2{
margin-top: calc(-100vw/20);
margin-bottom: calc(100vw/10);
position: relative;
z-index: 0;
border-top:15px solid #124098;
background: #fff;
min-height: 200px;
-webkit-transform: skew(0deg, -10deg);
transform: skew(0deg, -10deg);
}

.under_head2 .fig{
position: absolute;
top:-35%;
right: 5%;
width: 250px;
z-index: 0;
}

.under_head2 .fig img{
width: 100%;
-webkit-transform: skew(0deg, 10deg);
transform: skew(0deg, 10deg);
}

.under_body{
position: relative;
z-index: 1;
margin-top: calc(-100vw / 7.5);
}

@media screen and (max-width: 810px) {
.under_head2{
min-height: 50px;
}

.under_title2 h2{
font-size: 30px;
font-weight: 900;
padding-top:20px;
padding-left: 10%;
}

.under_title2 .clumb{
display: none;
}
.under_title2 h2 span{
font-size: 12px;
}

.under_head2 .fig{
position: absolute;
top:-70%;
right: 5%;
width: 25%;
z-index: 0;
}

.under_body{
margin-top: calc(-100vw/20);
}
}