@import url('https://fonts.googleapis.com/css?family=Sawarabi+Mincho&display=swap');
body{ text-align: left;}
.pc{ display:block;}
.sp{ display:none;}
.tr{-webkit-transition: 0.7s;-moz-transition: 0.7s;-o-transition: 0.7s;transition: 0.7s;}
.tr04{-webkit-transition: 0.4s;-moz-transition: 0.4s;-o-transition: 0.4s;transition: 0.4s;}
.cl:after { content: "";clear: both;display: block;}
/*a {cursor: pointer;}
a:link {text-decoration: none; font-size:inherit; font-weight:inherit; }
a:visited {text-decoration: none; color:inherit;}
a:hover {text-decoration: none; color: inherit;}
a:active {text-decoration: none; color:inherit;}*/
a,a:hover {-webkit-transition: 0.3s;-moz-transition: 0.3s;-o-transition: 0.3s;transition: 0.3s;}
.rn_index img {width: 100%; line-height: 0;}
.contentsArea {margin:10px auto 0 auto;max-width: 1040px;}
#contentsArea p {margin-bottom: auto;}
.in{margin: auto;max-width: 1040px;}
.in2{margin: auto;max-width: 1200px;}
.ma2{border-radius: 2px; -webkit-border-radius:2px;-moz-border-radius: 2px;}
.shdimg{-webkit-filter: drop-shadow(0 0 15px rgba(33, 74, 124, 1));}
.shdtx{text-shadow: 0 0 10px rgba(33, 74, 124, 0.8);}
.mainImage.typeWide2 {background-position: right 80%;}
.main_ttl{padding: calc(15px + 4%) 15px 0 15px; font-size: 3.4rem; line-height: 1.5em;letter-spacing: 0.04em;}
.mainHead_1{ text-align: center; line-height: 1.4em;margin: 30px 0 45px 0 !important; font-size:3rem !important; letter-spacing: 0.04em;  }
.sec_h_bb{ border-bottom: 1px solid #c8c8c9; padding: 0 0 10px 0;}
.sec_hdnav{ margin: 0 0 40px 0;}
.sec_hdnav li{ width: 19.6153%; margin: 0 0.4807% 0 0; float: left;}
.sec_hdnav li:last-child{ margin: 0;}
.sec_hdnav li a,.sec_hdnav li p{height: 60px; line-height: 60px; text-align: center !important;font-weight: 600; color: #fff;border-radius: 5px 5px 0 0;text-decoration: none;}
.sec_hdnav li a{ background: #c8c8c9; display: block; font-size: 1.9rem; }
.sec_hdnav li a:hover{ background: #595858;}
.sec_hdnav li p{background: #595858;font-size: 1.9rem;}
.sec_hdnav li br{display: none;}
.sec_h_feature{font-size: 2.8rem; margin: 0 30px 40px 30px;}
#contentsArea {margin:10px auto 0 auto;max-width: 1040px;}
.sec {border-bottom: none; margin: 0 0 calc(50px + 5%) 0; width: 100%; max-width: 1040px;}
#feat1,#feat2,#feat3,#feat4{ padding: 25px 0 0 0; margin: -25px 0 calc(50px + 5%) 0;}
#feat1,.fi2{animation-duration: 1.8s;animation-name: mv_1;}
@keyframes mv_1 {
    0% {opacity: 0;transform : translate(-50px, 0);}
    50% {opacity: 0; transform : translate(-50px, 0);}
    100% {opacity: 1;transform : translate(0, 0);}
}
@keyframes mv_0 {
    0% {opacity: 0;}
    50% {opacity: 0;}
    100% {opacity: 1;}
}
.tr1{animation: tr1 6s;}
.top_main_head{text-align:center; font-style:italic; margin:0 0 60px 0; font-family:din;}
@keyframes tr1{
  0%{transform: scale(1.1) ;left: 0; opacity: 0;}
  40%{left: 0; opacity: 1;}
  100%{transform: scale(1.0) ; left: 0; opacity: 1;}
}
.main_img{ height: 420px; position: relative; width: 100%; overflow: hidden; margin: 0 !important; padding: 0;}
.main_img_bg{ width: 100%; height: 100%; background-size: cover; background-position: right 80%;}
.main_img_in1{ position: absolute; top:0; left: 0; width: 100%; }
.feature_logolink{max-width: 380px; margin: 30px 0 0; padding: 0;}
.feature_logolink li{width: 49%; float: left; margin: 0 2% 2% 0; border: 1px solid #c8c8c9; text-align: center;/* background: url(../images/arrow.webp) 95% center/6px no-repeat;*/}
.feature_logolink li img{width: 100%; max-width: 186px; margin: 0 auto; display: block; padding: 0;}
.feature_logolink li:nth-child(even){margin: 0 0 1% 0;}
.feature_logolink li a {display: block;position: relative;}
.feature_logolink li a:after {background: url(../images/arrow.webp) no-repeat center center; background-size: contain; content: ""; display: block; height: 10px; position: absolute; right: 7px; top: 50%; transform: translateY(-50%); width: 10px;}
.btnList{ padding: calc(5px + 3%) 0 0 0;}
.btnList > li span {min-width: 190px; text-align: center;}
.column {display: block; overflow: hidden;}
.feat_box1{ width: 48% ; float: left; margin: 0!important; }
.feat_box1 h3{font-size: 16px; font-weight: bold; margin: 20px 0 3px;}
.feat_box1 ul + h3{margin-top: 17px;}
.feat_box1 h3 + ul{margin-top: 0;}
.feat_box2{ width: 48% ; float: right; margin: 0 !important;}
p{text-align: justify;text-justify: inter-ideograph;text-justify: inter-character;}

sub{font-size: 0.7em;position: relative;}
.fi {opacity : 0;transform : translate(-50px, 0);transition : all 1s;}
.fi.scrollin {opacity : 1;transform : translate(0, 0);}
.mgb15{margin-bottom: 15px !important;}
.txtLinkList {margin-bottom: 0;}
.feature_logolink + .txtLinkList {margin-top: 20px;}
p + .txtLinkList {margin-top: 30px;}
.txtLinkList > li > a {background-position: left 0.2em; display: block;}
.feature_note1  {background: #F5F5F5; margin: 20px 0 0; padding: 11px 45px 11px 39px;}
.feature_note1 h3  {font-size: 19px; font-weight: 500; line-height: 1.47; margin: 0 0 15px;}
.feature_note1 p  {font-size: 14px; font-weight: 400; line-height: 1.7; margin: 0;}
@media screen and (max-width: 767px) {
    .pc{ display:none;}
    .sp{ display:block;}
    .in{ padding: 0 15px;}
    .main_ttl{font-size: 1.7rem; }
    .mainHead_1{ margin:25px 0 !important; padding: 0 15px; font-size:1.5rem !important;  }
    .sec_hdnav{padding: 0 15px; margin: 0;}
    /*.sec_hdnav li{ width: 49.5%; margin: 0 1% 1% 0;}
    .sec_hdnav li:nth-child(even){ margin: 0 0 1% 0;}*/
    .sec_hdnav li a,.sec_hdnav li p{height: 50px; line-height: 1.2; padding-top: 10px;}
    .sec_hdnav li a{ background: #c8c8c9; display: block; font-size: 1.4rem;}
    .sec_hdnav li p{background: #595858;font-size: 1.4rem;}
	.sec_hdnav li br{display: inherit;}
    .sec_h_feature{font-size: 1.7rem; margin: 0 15px 15px 15px;}
    .feature_img{ padding:0 15px;}
    #feat1,#feat2,#feat3,#feat4{ padding: 10px 0 0 0; margin: -10px 0 calc(50px + 5%) 0;}
    .feat_box1,.feat_box2{ width: 100% ; float: none;}
	.feat_box1 h3{margin: 10px 0 3px;}
	.feat_box1 ul + h3{margin-top: 10px;}
    .feature_logolink{ width: 100%; max-width: 100%; margin-top: 10px;}
    .feature_logolink li{border-radius:5px;}
    .main_img{ height:250px;}
	.txtLinkList > li > a {background-position: left 0.2em;}
    .feature_logolink + .txtLinkList {margin-top: 10px;}
	p + .txtLinkList {margin-top: 10px;}
	.feature_note1  {margin: 15px 0 0; padding: 15px 20px;}
	.feature_note1 h3  {font-size: 18px; margin: 0 0 10px;}
}