@charset "utf-8";

/* -------------------------------------------------------------------------------------

	web font

 ------------------------------------------------------------------------------------- */

@import 'https://fonts.googleapis.com/css?family=Open+Sans|Quicksand';
@import 'https://fonts.googleapis.com/earlyaccess/notosansjapanese.css';

@font-face {
  font-family: 'EightOne';
  src: url('font/EIGHT_ONE_font_by_dree23km.ttf') format('truetype');
}

/* -------------------------------------------------------------------------------------

	body

 ------------------------------------------------------------------------------------- */

body{
margin:0px;
line-height:150%;
font-size:95%;
color:#333;
font-family: 'Noto Sans Japanese', sans-serif;
-webkit-text-size-adjust: 100%;
}

a:link { color: #1f8dee;text-decoration:underline;}
a:visited { color: #1f8dee;text-decoration:underline;}
a:hover {color: #1f8dee;text-decoration:none;}
a:active {color: #1f8dee;text-decoration:none;}

/**a:hover{
	filter: alpha(opacity=25);
  -moz-opacity:0.25;
  opacity:0.25;
}**/

article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary{
display:block;
}

/* page */

p{
margin:0px;
padding:0px;
}

p.p20180604 {
    font-weight: bold;
    position: relative;
    display: block;
    text-align: center;
    text-decoration: none;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
}

img{
border:0px;
vertical-align:bottom;
}

ul,li,dl,dt,dd{
padding:0px;
margin:0px;
}

.flort-l{	float:left;}
.flort-r{	float:right;}

.red{	color:#F00;}

.red2{	color:#990000;}

.err{	color:#F00;}

.ter{text-align:right;}

.color1{color:#cc0000;}
.color2{color:#4c8413;}
.color3{color:#6C3F72;}

.ERR{color:#cc0000;}

/* --------------------------------------------------
clearfix
-------------------------------------------------- */
.clearfix { overflow:hidden; }
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
* html .clearfix { zoom:1; }
*:first-child+html .clearfix { zoom:1; }

/* margin ==================================================================*/

.mrb4{	margin-bottom:4px;}
.mrb10{	margin-bottom:10px;}
.mrb15{	margin-bottom:15px;}
.mrb20{	margin-bottom:20px;}
.mrb30{	margin-bottom:30px;}
.mrb40{	margin-bottom:40px;}
.mrb60{	margin-bottom:60px;}

.mrt10{	margin-top:10px;}


.mrr20{margin-right:20px;}

.terb10{	text-align:right;
			margin-bottom:10px;}

.tec{	text-align:center;}

.tecb20{	text-align:center;
			margin-bottom:20px;}

.tecb40{	text-align:center;
			margin-bottom:40px;}

.pankuzu{	margin-bottom:20px;
			font-size:12px;}





h1,h2,h3,h4,h5,h6{
margin:0px;
padding:0px;
}




/* link color ==================================================================*/

.aover:hover{
filter:alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
}





/* 文字サイズ変更 */

#fontController {
	width: 71px;
	_width: 74px;
	padding: 0 0 0 74px;
	background:url(../img/tp-size.gif) no-repeat 0 0px;
	font-size: 9px;
	line-height:1.4;
	float:left;
	margin-right:20px;
}

#fontController dt {
	display:none;
}

#fontController dd {
	float:left;
}

#fontController dd a {
	display:block;
	height:34px;
	font-size:1px;
	text-indent:-9999px;
	background:url(../img/fontsize-bt.gif) no-repeat 0 0;
}

#fontController dd.small {
	display: none;
}

#fontController dd.small ,
#fontController dd.small a {
	display: none;
}

#fontController dl dd.small a:hover ,
#fontController dl dd.small a.small-btn-on {
	background-position:0 bottom;
}

#fontController dd.middle ,
#fontController dd.middle a {
	padding-right:3px;
	width:34px;
	background-position:0 0;
}

#fontController dl dd.middle a:hover ,
#fontController dl dd.middle a.reset-btn-on {
	background-position:0 bottom;
}

#fontController dd.large ,
#fontController dd.large a {
	width:34px;
	background-position:-37px 0;
	float:right;
}

#fontController dl dd.large a:hover ,
#fontController dl dd.large a.large-btn-on {
	background-position:-37px bottom;
}


/* 背景色変更 */

#bgcolor p{	float:left;
			margin-right:10px;}

#bgcolor ul{float:left;}

#bgcolor li{
	list-style:none;
	float:right;
	margin-right:3px;
}

/* -------------------------------------------------------------------------------------

	ページトップへ戻る

-------------------------------------------------------------------------------------- */

#page-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	font-size: 77%;
	border-radius: 10px;
	background: rgba(0,0,0,0.7);
	z-index: 10000;
}

#page-top img{
	width:68px;
	height:42px;
}

#page-top a {
	padding: 10px;
	display: block;
	text-decoration: none;
	color: #fff;
}

#page-top a:hover {
	text-decoration: none;
	opacity:1;
}



/* -------------------------------------------------------------------------------------

	新キービジュアル

-------------------------------------------------------------------------------------- */
.new_mainimage {
    background: url(../img/mv_bg00.png) center no-repeat;
    background-size: cover;
    padding-top: 30px;
    padding-bottom: 30px;
}

.new_mainimage > p,
.new_mainimage > .inner {
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    margin-left: auto;
    margin-right: auto;
    max-width: 1441px;
    width: 100%;
}

.new_mainimage img {
    display: inline-block;
    height: auto;
    max-width: 100%;
}

.new_mainimage > .inner > p:nth-child(1),
.new_mainimage > .inner > p:nth-child(3) {
    max-width: 670px;
    width: 49.27133934767523%;
}

.new_mainimage > .inner > p:nth-child(2),
.new_mainimage > .inner > p:nth-child(4) {
    width: 47.74462179042332%;
}

.new_mainimage > .inner > p:nth-child(2) img {
    position: relative;
    top: -68px;
}

.new_mainimage > .inner > p:nth-child(4) img {
    position: relative;
    top: -20px;
}

.new_mainimage > .inner > p:nth-child(3) {
    margin-top: 20px;
}

.new_mainimage p a[href="#contact"] {
    display: block;
}

.new_mainimage p a[href="#contact"]:hover {
    opacity: 0.9;
}

@media all and (max-width:420px) {
    .new_mainimage > .inner {
        flex-direction: column;
        margin-left: 10px;
        margin-right: 10px;
        width: auto;
    }

    .new_mainimage > p {
        margin-left: 10px;
        margin-right: 10px;
        width: auto;
    }

    .new_mainimage > .inner > p {
        margin-top: 20px;
        text-align: center;
        width: 100% !important;
    }

    .new_mainimage > .inner > p:nth-child(1) {
        order: 2;
    }

    .new_mainimage > .inner > p:nth-child(2) {
        order: 1;
    }

    .new_mainimage > .inner > p:nth-child(2) img,
    .new_mainimage > .inner > p:nth-child(4) img {
        position: static;
    }

    .new_mainimage > .inner > p:nth-child(3) {
        order: 4;
    }

    .new_mainimage > .inner > p:nth-child(4) {
        order: 3;
    }
}

/* -------------------------------------------------------------------------------------

	Q&A アコーディオン

-------------------------------------------------------------------------------------- */
.faq-block .cont .block .question span {
    border: solid 1px #2371c1;
    color: #2371c1;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    line-height: 1;
    padding: 8px;
    position: relative;
    top: -3px;
    left: 10px;
}

.faq-block .cont .block .question span:hover {
    background: #2371c1;
    color: #fff;
}

.faq-block .cont .block .answer {
    display: none;
}

@media all and (max-width: 768px) {
    .faq-block .cont .block .question span {
        display: block;
        margin-top: 10px;
        text-align: center;
        left: 0;
    }
}

.keigen_slider {
    border-top: solid 10px #2770c0;
    border-bottom: solid 10px #2770c0;
    margin-top: 120px;
    margin-bottom: 60px;
    position: relative;
}

.keigen_header {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 500;
    height: 720px;
    background-color: rgba(00,00,00,0.8);
    background-image: url("../img/main_image_bg.png");
}

@media screen and (min-width: 1150px) {
    .keigen_header::before {
    	background-color: #fff;
    	content: "";
    	display: block;
    	height: 60px;
    	position: absolute;
    	bottom: -10px;
    	left: 0;
    	width: 26.27430373095113%;
    	z-index: 2;
    	border-top: solid 10px #2770c0;
    	border-right: solid 10px #2770c0;
    }

    .keigen_header::after {
    	background-color: #fff;
    	content: "";
    	display: block;
    	height: 60px;
    	position: absolute;
    	bottom: -10px;
    	right: 0;
    	width: 26.27430373095113%;
    	z-index: 2;
    	border-top: solid 10px #2770c0;
    	border-left: solid 10px #2770c0;
    }

    .keigen_header .inner::before {
        background-color: #fff;
        content: "";
        display: block;
        height: 60px;
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        width: 47.29374671571203%;
        z-index: 2;
        border-bottom: solid 10px #2770c0;
        border-left: solid 10px #2770c0;
        border-right: solid 10px #2770c0;
    }
}

.keigen_header h2 {
    position: absolute;
    top: 51.5%;
    left: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    text-align: center;
    width: 100%;
}

.keigen_taisyo {
    margin-top: 60px;
    margin-bottom: 60px;
}

.keigen_taisyo h3 {
    border-radius: 0.6em;
    background-color: #2270c1;
    max-width: 1200px;
    margin: 20px auto 90px;
    padding: 40px;
    position: relative;
    text-align: center;
}

.keigen_taisyo h3::before {
    content: "";
    margin-left: -150px;
    position: absolute;
    left: 50%;
    bottom: -50px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 150px 0 150px;
    border-color: #226fc1 transparent transparent transparent;
}

.keigen_taisyo ul {
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    justify-content: center;
    align-items: flex-end;
    list-style: none;
    max-width: 1040px;
    margin: 40px auto;
}

.keigen_taisyo ul li {
    margin-left: 1.923076923076923%;
    margin-right: 1.923076923076923%;
    width: 48.07692307692308%;
}

.css3bt.orange{
    background-color: #ff9854;
    color: #fff;
    padding: 20px;
    font-weight: bold;
    position: relative;
    display: block;
    text-align: center;
    text-decoration: none;
    outline: none;
    background-image: url("../img/bt_arrow_right.png");
    background-repeat: no-repeat;
    background-position: right center;
    -webkit-border-radius: 3px;
            border-radius: 3px;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-transition: none;
            transition: none;
    -webkit-text-shadow: 1px 1px 0 #b56a3b;
       -moz-text-shadow: 1px 1px 0 #b56a3b;
        -ms-text-shadow: 1px 1px 0 #b56a3b;
        -mo-text-shadow: 1px 1px 0 #b56a3b;
            text-shadow: 1px 1px 0 #b56a3b;
    -webkit-box-shadow: 0 2px 0 #b56a3b;
       -moz-box-shadow: 0 2px 0 #b56a3b;
        -ms-box-shadow: 0 2px 0 #b56a3b;
        -mo-box-shadow: 0 2px 0 #b56a3b;
            box-shadow: 0 2px 0 #b56a3b;
    font-size: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.css3bt::before,
.css3bt::after {
    position: absolute;
    z-index: -1;
    display: block;
    content: '';
}
.css3bt:hover {
    color: #FFF;
    top: 2px;
    -webkit-box-shadow: 0 0px 0 #073c5b;
       -moz-box-shadow: 0 0px 0 #073c5b;
        -ms-box-shadow: 0 0px 0 #073c5b;
        -mo-box-shadow: 0 0px 0 #073c5b;
            box-shadow: 0 0px 0 #073c5b;
}


/* ------------------------------
   loopSlider
------------------------------ */
.loopsliderWrap {
    top: 0;
    left: 0;
    height: 240px;
    overflow: hidden;
    position: absolute;
}

.loopslider {
    margin: 0 auto;
    width: 100%;
    height: 240px;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.loopslider ul {
    height: 240px;
    float: left;
    overflow: hidden;
}

.loopslider ul li {
    width: 320px;
    height: 240px;
    float: left;
    display: inline;
    overflow: hidden;
}

.loopslider:not(:first-of-type) ul li img {
    display: block;
    margin: 10px 5px 0;
}

/* ------------------------------
   CLEARFIX ELEMENTS
------------------------------ */
.loopsliderWrap:after {
    content: "";
    display: none;
    clear: none;
}

@media screen and (max-width: 414px) {
    .keigen_slider {
        margin-bottom: 0;
    }

    .keigen_header {
        height: 240px;
    }

    .keigen_header h2 {
        box-sizing: border-box;
        top: 50%;
        padding: 0 20px;
    }

    .keigen_taisyo h3 {
        border-radius: 0;
        margin-bottom: 40px;
    }

    .keigen_taisyo h3::before {
        margin-left: -70px;
        bottom: -25px;
        border-width: 25px 70px 0 70px;
    }

    .keigen_taisyo ul {
        flex-direction: column;
        margin: 0;
    }

    .keigen_taisyo ul li {
        margin: 20px 0;
        text-align: center;
        width: 100%;
    }
    .css3bt.orange {
        padding: 10px 40px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .loopsliderWrap {
        height: 120px;
    }

    .loopslider {
        height: 120px;
    }

    .loopslider ul li {
        height: 120px;
        width: 170px;
    }

    .loopslider:first-of-type {
        display: none;
    }
}