﻿/* 共通CSS */
html{font-size:62.5%;color:#000;background:#FFF;-webkit-text-size-adjust:100%}
blockquote,body,code,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
p{font-size:1.3rem;line-height:1.6em}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}sub{vertical-align:text-bottom}
input,select,textarea{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}
legend{color:#000}
body{font-family:"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Meiryo", "メイリオ", "Osaka", "MS PGothic", arial, helvetica, sans-serif;
    background:#fff;
    color:#555;
    line-height:1.7rem;
    width:100vw;
    box-sizing:border-box;
    overflow-x:hidden;
}
.wrapper{
    width:100%;
    box-sizing:border-box;
    height:auto;
    background-color:#fff;
    position:relative;
}
.inr{
    width:100%;
    height:100%;
    box-sizing:border-box;
    margin:0;
    padding:0;
}
/* -------------------------------------------------- 各ページコンテンツ共通 ----------------------------------------------------- */
.top-img-wrapper{
    width:100%;
	margin-bottom: 100px;
    box-sizing:border-box;
}
.main-contents-wrapper{
    width:100%;
    margin: 0 auto 100px;
    box-sizing: border-box;
}

/* -------------------------------------------------- ヘッダー ----------------------------------------------------- */
header{
    z-index:1000;
    top:0;
    position:fixed;
    width:100%;
    box-sizing:border-box;
    height:120px;
    background-color:#fff;
}
.header-inr{
    width:100%;
    height:100%;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:0;
    padding:0 30px 0 40px;
    border-bottom:solid 2px #000;
    position:relative;
}
header h1{
    position:absolute;
    top:10px;
    left:50px;
    font-size:10px;
    color:#707070;
}
#logo{
    width:180px;
    height:55px;
    z-index:1010;
}
#logo a img{
    width:100%;
    height:100%;
    box-sizing:border-box;
}
.headerwrapright {
	float: right;
}
.headerwrapright nav ul {
	display: table;
}
.headerwrapright .global-list:after{
    content:'';
    width:0;
    transition:all .3s ease;
    border-bottom: solid 3px #000;
    display:block;
    padding-top:5px;
}
.headerwrapright .global-list:hover:after{
    width:100%;
    box-sizing:border-box;
    border-bottom: solid 3px #000;
}
.headerwrapright nav ul li {
	display: table-cell;
	padding-left:15px;
	padding-right:15px;
}
.global-list a {
	padding-top:20px;
	padding-bottom:20px;
	display: inline;
	color: #000;
	font-size: 15px;
	font-weight:bold;
	text-decoration: none;
}
.headerwrapright nav ul .menu {
	clear: both;
	transition: all .2s ease-in;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	width: 100%;
	left: 0;
	right: 0;
	text-align: center;
	position: absolute;
    margin-top:25px;
}
.headerwrapright nav ul li:hover .menu, .headerwrapright nav ul li:focus .menu{
	max-height: 9999px;
	opacity: 0.9;
	background: #fff;
	font-weight: bold;
	outline:none;
	padding-top: 60px;
}
.headerwrapright nav ul .menu img{
    position:absolute;
    bottom:4px;
    width:20px;
    height:20px;
    display:inline-block;
    padding-left:8px;
}
.global-list img{
    position:absolute;
    bottom:48px;
    width:20px;
    height:20px;
    display:inline-block;
}
.headerwrapright nav ul .menu .menu_inner {
    margin:0 auto 20px auto;
}
.headerwrapright nav ul .menu .menu_inner2{
    margin:0 auto 30px auto;
}
.headerwrapright nav ul .menu .menu_inner3 {
    margin: 0 auto 30px auto;
}
.headerwrapright nav ul .menu .menu_inner li, .headerwrapright nav ul .menu .menu_inner2 li, .headerwrapright nav ul .menu .menu_inner3 li {
	position:relative;
    display: inline-block;
    width:300px;
    padding:0;
    margin-right:50px;
}
.headerwrapright nav ul .menu .menu_inner li a, .headerwrapright nav ul .menu .menu_inner2 li a, .headerwrapright nav ul .menu .menu_inner3 li a{
    padding:5px 0;
    border-bottom:2px solid #000;
    width:100%;
    float:left;
    text-align: left;
}
nav ul li.global-list:hover ul ,
nav ul li.global-list:focus ul {
	max-height: 9999px;
	opacity: 1;
}
.headerwrapright nav ul .menu .menu_inner li a::after, .headerwrapright nav ul .menu .menu_inner2 li a::after, .headerwrapright nav ul .menu .menu_inner3 li a::after{
    /* サブメニュー内右矢印 */
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid #000;
    border-top: 2px solid #000;
    display: inline-block;
    transform: rotate(45deg);
    position:absolute;
    right:0;
    bottom:10px;
}
/* エントリーボタン */
#chuto-btn{
    width:192px;
    height:60px;
    line-height: 60px;
    text-align:center;
    background-color:#2980B9;
    color:#fff;
    padding:20px 50px;
    transition:.3s;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 100px;
    box-shadow: 3px 3px #3c586e;
}
#chuto-btn:hover{
    opacity: 0.5;
    transition:.3s;
}
#responsive-entry-btn{
    display:none;
}
/* 説明会ボタン */
.shinsotsu-btn {
    width:192px;
    height:60px;
    line-height: 60px;
    text-align:center;
    background-color:#FF6F20;
    color:#fff;
    padding:20px 50px;
    transition:.3s;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 100px;
    box-shadow: 3px 3px #956734;
}
.shinsotsu-btn:hover{
    opacity: 0.5;
    transition:.3s;
}
.responsive-shinsotsu-btn{
    display:none;
}
.header-space{
    width:100vw;
    height:100px;
}
#responsive-menu{
    display:none;
}
#hamburger{
    display:none;
}
/* -------------------------------------------------- フッター ----------------------------------------------------- */
footer{
    width:100%;
    box-sizing:border-box;
    height:auto;
}
/* PAGE TOP（TOPへスクロール）領域 */
.scroll-top{
    width:100%;
    height:100px;
    box-sizing:border-box;
    background-color:#fff;
    cursor:pointer;
    transition:.5s;
    margin-top: 120px;
}
.scroll-top:hover{
    opacity:0.7;
}
.triangle{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 50vw 100px 50vw;
    border-color: transparent transparent #000 transparent;
    position:relative;
}
.arrow-top{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 40px 30px 40px;
    border-color: transparent transparent #fff transparent;
    position:absolute;
    top:30px;
    left:-40px;
}
.arrow-top-overlap1{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 40px 30px 40px;
    border-color: transparent transparent #000 transparent;
    position:absolute;
    top:33px;
    left:-40px;
}
.arrow-top-overlap2{
    width: 80px;
    height: 10px;
    background-color:#000;
    position:absolute;
    top:50px;
    left:-40px;
}
.page-top{
    width:106px;
    text-align:center;
    color:#fff;
    font-size:14px;
    letter-spacing:2px;
    position:absolute;
    top:55px;
    transform:translateX(-53px);
	cursor: pointer;
}
/* 採用エントリーバナー */
#sticky-right-banner {
    position: fixed;
    right: 20px;
    top: 85%;
    transform: translateY(-50%);
    z-index: 9999;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; 
}
#sticky-right-banner img {
    max-width: 100%;
    height: auto;
    display: block;
    width: 350px;
}
#sticky-right-banner:hover {
    transform: translateY(-50%) scale(1.05); 
    opacity: 0.8; 
}
@media (max-width: 1280px) {
    #sticky-right-banner {
        display: none; 
    }
}

/* フッターコンテンツ */
.footer-main{
    width:100%;
    height:250px;
    padding-top:70px;
    background-color: #FFE400;
}
.footer-contents{
    margin:0 auto;
}
.clinks-btn{
    width:142px;
    margin:0 auto;
}
.snsbtn{
    width:200px;
    margin:25px auto 25px auto;
    display:flex;
    justify-content:space-between;
}
.clinks-blogbtn:hover, .fb-btn:hover, .twitter-btn:hover, .youtube-btn:hover{
    opacity:0.5;
}
.copyright{
    margin-top:20px;
}
.copyright p{
    color:#000;
    font-size:10px;
    font-weight:bold;
    text-align:center;
}
.copyright :nth-child(2){
    margin-top:10px;
}
/* ----------------------------------------------------------------------------------------------------------------------------------------------------


                レスポンシブ


------------------------------------------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 1280px){
    /* 各ページコンテンツ共通 */
	.top-img-wrapper{
		margin-bottom: 50px;
	}
	.main-contents-wrapper{
		margin-bottom: 100px;
	}
    /* ヘッダー */
    header{
        height:90px;
    }
    .header-inr{
        padding:0 90px 0 25px;
    }
    header h1{
        display:none;
    }
    #logo{
        width:180px;
        height:55px;
    }
    .headerwrapright{
        display:none;
    }
    #responsive-entry-btn{
        display:block;
        width:100px;
        height:38px;
        line-height:38px;
        text-align:center;
        border: solid 2px #000;
        background-color: #000;
        transition:.3s;
    }
    #responsive-entry-btn a{
        width:100%;
        display:inline-block;
        text-decoration: none;
        font-style:oblique;
        font-size: 14px;
        font-weight:bold;
        letter-spacing:0px;
        color:#FFE400;
    }
    #responsive-entry-btn:hover{
        background-color:#FFE400;
    }
    #responsive-entry-btn a:hover{
        background-color:transparent;
        color:#000;
        transition:.3s;
    }
    /* ハンバーガー（メニュー） */
    #responsive-menu{
        display:block;
        height:70vh;
        max-height:500%;
        width:353px;
        position:absolute;
        top:88px;
        right:-355px;
        background-color:#000;
        transition:.7s;
    }
    #responsive-menu ul{
        width:100%;
        height:100%;
        box-sizing:border-box;
        overflow-y:scroll;
    }
    #responsive-menu ul li{
        height:40px;
        line-height:40px;
        padding-left:53px;
        list-style-type:none;
        border-bottom:0.5px solid #fff;
    }
    #responsive-menu ul li:nth-child(1), #responsive-menu ul li:nth-child(8), 
    #responsive-menu ul li:nth-child(12), #responsive-menu ul li:nth-child(13), 
    #responsive-menu ul li:nth-child(14){
        padding-left:22px;
    }
    #responsive-menu ul li a{
        display:inline-block;
        font-size:16px;
        font-weight:bold;
        text-decoration:none;
        color:#fff;
        transition:.5s;
    }
    #responsive-menu ul li a img{
        display:inline-block;
        vertical-align: middle;
        width:25px;
        height:25px;
        margin-left:10px;
    }
    /* ハンバーガー（ボタン） */
    #hamburger{
        display:block;
        position:absolute;
        top:20px;
        right:21px;
        width:40px;
        height:38px;
        cursor:pointer;
        transition:1s;
        z-index:1001;
    }
    #hamburger .inner_line{
        display:block;
        position:absolute;
        top:0;
        right:0;
        width:44px;
        height:3px;
        background-color:#000;
    }
    #hamburger #line1{top:6px;}
    #hamburger #line2{top:20px;}
    #hamburger #line3{top:34px;}
    .in{transform:translateX(-353px);}
    #hamburger .line_1,  #hamburger .line_2,  #hamburger .line3{
        background-color:#000;
    }
    #hamburger .line_1{
        transform:translateY(14px) rotate(-45deg);
        transition:1s;
    }
    #hamburger .line_2{
        opacity:0;
    }
    #hamburger .line_3{
        transform:translateY(-14px) rotate(45deg);
        transition:1s;
    }
    #sub-menu1, #sub-menu2{
        display:none;
        opacity:0;
    }
    .header-space{
        height:90px;
    }
    /* フッター */
    /* PAGE TOP（TOPへスクロール）領域 */
    .scroll-top{
        height:90px;
        background-color:#000;
        position:relative;
    }
    .triangle{
        border-width: 0 50vw 80px 50vw;
        border-color:transparent;
    }
    .arrow-top{top:24px;}
    .arrow-top-overlap1{top:27px;}
    .arrow-top-overlap2{
        top:40px;
        height:15px;
    }
    .page-top{
        font-size:14px;
        letter-spacing:2px;
        top:45px;
    }
	.main-contents-wrapper{
		margin-bottom: 100px;
	}
}
/* ----------------------------------------------------------------------------------------------------------------------------------------------------


                iOS（iPhone,iPad）とAndroidでの表示時は、ヘッダーメニューを全てレスポンシブと同じ挙動にする


------------------------------------------------------------------------------------------------------------------------------------------------------- */
.iPhone .top-img-wrapper, .iPad .top-img-wrapper, .Android .top-img-wrapper{
    margin-bottom: 50px;
}
.iPhone .main-contents-wrapper, .iPad .main-contents-wrapper, .Android .main-contents-wrapper{
    margin-bottom: 100px;
}
/* ヘッダー */
.iPhone header, .iPad header, .Android header{
    height:90px;
}
.iPhone .header-inr, .iPad .header-inr, .Android .header-inr{
    padding:0 90px 0 25px;
    position:relative;
}
.iPhone header h1, .iPad header h1, .Android header h1{
    display:none;
}
.iPhone #logo, .iPad #logo, .Android #logo{
       width:130px;
        height:40px;
}
.iPhone .headerwrapright, .iPad .headerwrapright, .Android .headerwrapright{
    display:none;
}
.iPhone #responsive-entry-btn, .iPad #responsive-entry-btn, .Android #responsive-entry-btn{
    display:block;
    width:100px;
    height:38px;
    line-height:38px;
    text-align:center;
    border: solid 2px #000;
    background-color: #FFE400;
    transition:.3s;
}
.iPhone #responsive-entry-btn a, .iPad #responsive-entry-btn a, .Android #responsive-entry-btn a{
    width:100%;
    display:inline-block;
    text-decoration: none;
    font-size: 14px;
    font-weight:bold;
    letter-spacing:0px;
    color:#000;
}
.iPhone #responsive-entry-btn:hover, .iPad #responsive-entry-btn:hover, .Android #responsive-entry-btn:hover{
    background-color:#000;
}
.iPhone #responsive-entry-btn a:hover, .iPad #responsive-entry-btn a:hover, .Android #responsive-entry-btn a:hover{
    background-color:transparent;
    color:#FFE400;
    transition:.3s;
}
/* ハンバーガー（メニュー） */
.iPhone #responsive-menu, .iPad #responsive-menu, .Android #responsive-menu{
    display:block;
    height:70vh;
    max-height:500%;
    width:353px;
    position:absolute;
    top:88px;
    right:-355px;
    background-color:#000;
    transition:.7s;
}
.iPhone #responsive-menu ul, .iPad #responsive-menu ul, .Android #responsive-menu ul{
    width:100%;
    height:100%;
    box-sizing:border-box;
    overflow-y:scroll;
}
.iPhone #responsive-menu ul li, .iPad #responsive-menu ul li, .Android #responsive-menu ul li{
    height:40px;
    line-height:40px;
    padding-left:53px;
    list-style-type:none;
    border-bottom:0.5px solid #fff;
}
.iPhone #responsive-menu ul li:nth-child(1), .iPhone #responsive-menu ul li:nth-child(8), 
.iPhone #responsive-menu ul li:nth-child(12), .iPhone #responsive-menu ul li:nth-child(13), 
.iPhone #responsive-menu ul li:nth-child(14),
.iPad #responsive-menu ul li:nth-child(1), .iPad #responsive-menu ul li:nth-child(8), 
.iPad #responsive-menu ul li:nth-child(12), .iPad #responsive-menu ul li:nth-child(13), 
.iPad #responsive-menu ul li:nth-child(14),
.Android #responsive-menu ul li:nth-child(1), .Android #responsive-menu ul li:nth-child(8), 
.Android #responsive-menu ul li:nth-child(12), .Android #responsive-menu ul li:nth-child(13), 
.Android #responsive-menu ul li:nth-child(14){
    padding-left:22px;
}
.iPhone #responsive-menu ul li a, .iPad #responsive-menu ul li a, .Android #responsive-menu ul li a{
    display:inline-block;
    font-size:16px;
    font-weight:bold;
    text-decoration:none;
    color:#fff;
    transition:.5s;
}
.iPhone #responsive-menu ul li a img, .iPad #responsive-menu ul li a img, .Android #responsive-menu ul li a img{
    display:inline-block;
    vertical-align: middle;
    width:25px;
    height:25px;
    margin-left:10px;
}
/* ハンバーガー（ボタン） */
.iPhone #hamburger, .iPad #hamburger, .Android #hamburger{
    display:block;
    position:absolute;
    top:20px;
    right:21px;
    width:40px;
    height:38px;
    cursor:pointer;
    transition:1s;
    z-index:1001;
}
.iPhone #hamburger .inner_line, .iPad #hamburger .inner_line, .Android #hamburger .inner_line{
    display:block;
    position:absolute;
    top:0;
    right:0;
    width:44px;
    height:3px;
    background-color:#000;
}
.iPhone #hamburger #line1, .iPad #hamburger #line1, .Android #hamburger #line1{top:6px;}
.iPhone #hamburger #line2, .iPad #hamburger #line2, .Android #hamburger #line2{top:20px;}
.iPhone #hamburger #line3, .iPad #hamburger #line3, .Android #hamburger #line3{top:34px;}
.iPhone .in, .iPad .in, .Android .in{transform:translateX(-353px);}
.iPhone #hamburger .line_1, .iPhone #hamburger .line_2, .iPhone #hamburger .line3,
.iPad #hamburger .line_1, .iPad #hamburger .line_2, .iPad #hamburger .line3,
.Android #hamburger .line_1, .Android #hamburger .line_2, .Android #hamburger .line3{
    background-color:#000;
}
.iPhone #hamburger .line_1, .iPad #hamburger .line_1, .Android #hamburger .line_1{
    transform:translateY(14px) rotate(-45deg);
    transition:1s;
}
.iPhone #hamburger .line_2, .iPad #hamburger .line_2, .Android #hamburger .line_2{
    opacity:0;
}
.iPhone #hamburger .line_3, .iPad #hamburger .line_3, .Android #hamburger .line_3{
    transform:translateY(-14px) rotate(45deg);
    transition:1s;
}
.iPhone #sub-menu1, #sub-menu2, .iPad #sub-menu1, #sub-menu2, .Android #sub-menu1, #sub-menu2{
    display:none;
    opacity:0;
}
.iPhone .header-space, .iPad .header-space, .Android .header-space{
    height:70px;
}
/* フッター */
/* PAGE TOP（TOPへスクロール）領域 */
.iPhone .scroll-top, .iPad .scroll-top, .Android .scroll-top{
    height:90px;
    background-color:#000;
    position:relative;
}
.iPhone .triangle, .iPad .triangle, .Android .triangle{
    border-width: 0 50vw 80px 50vw;
    border-color:transparent;
}
.iPhone .arrow-top, .iPad .arrow-top, .Android .arrow-top{top:24px;}
.iPhone .arrow-top-overlap1, .iPad .arrow-top-overlap1, .Android .arrow-top-overlap1{top:27px;}
.iPhone .arrow-top-overlap2, .iPad .arrow-top-overlap2, .Android .arrow-top-overlap2{
    top:40px;
    height:15px;
}
.iPhone .page-top, .iPad .page-top, .Android .page-top{
    font-size:14px;
    letter-spacing:2px;
    top:45px;
}
.iPhone .main-contents-wrapper, .iPad .main-contents-wrapper, .Android .main-contents-wrapper{
    margin-bottom: 100px;
}