@charset "utf-8";

/*		Contents
---------------------------------------------------------------------------

	Reset Styles
	From（フォーム）
	Paging（ページング）
	Widget（共通パーツ）

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

/* ========================================================================
	Reset Styles
======================================================================== */
    /* font-face */
    @font-face{
		font-family:"YuGothic M"; /* Windows Firefox用 */
		src:local(Yu Gothic Medium);
    }
    .clearfix::after{
        content: "";
        display: block;
        clear: both;
    }
    strong{
		font-weight: normal;
    }
    /* HTML5 */
    article, aside, figure, figcaption, video, footer, header,
    main, nav, section, summary{
		display:block;
		margin:0;
		padding:0;
		/*clear: both;*/
    }
    /* Base Styles */
    *{
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		-o-box-sizing:border-box;
		-ms-box-sizing:border-box;
		box-sizing:border-box;
    }
    html, body, div, h1, h2, h3, h4, h5, h6,
    p, blockquote, pre, address, small,
    ul, ol, li, dl, dt, dd,
    table, th, td,
    form, fieldset{
		margin:0;
		padding:0;
		font-weight:normal;
    }
    html{
      font-size:62.5%; /* 10px */
    }
    body{
		font-family:"游ゴシック Medium", "游ゴシック体", "YuGothic M", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
		font-size:1.4rem; /* 14px */
		color:#333333;
		line-height:1.2;
    -webkit-text-size-adjust:100%;
    }
    select,input,button,textarea{
		font-family:inherit;
		font-size:100%;
		color:#333333;
    }
    pre,code,kbd,samp{
		font-family:inherit;
    }
    img,
    iframe{
		border:none;
		vertical-align:bottom;
    }
    table{
		width:100%;
		border:none;
		border-collapse:collapse;
		border-spacing:0;
		font-size:inherit;
		font:100%;
    }
    label{
		cursor:pointer;
    }
    input,
    textarea{
		padding:0;
		vertical-align:middle;
    }
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    input[type="number"],
    input[type="password"],
    textarea{
    	border-radius:0; /* iPhone・iPad 角丸解除 */
    	-webkit-appearance:none; /* iPhone・iPad グラデーション解除 */
    }
    /* Firefox・IE スピンボタン非表示 */
    input[type="number"]{
		-moz-appearance:textfield;
    }
    /* Chrome・Safari スピンボタン非表示 */
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button{
		margin:0;
		-webkit-appearance:none;
    }
    input[type="radio"],
    input[type="checkbox"]{
		cursor:pointer;
    }
    button,
    input[type="image"],
    input[type="submit"],
    input[type="button"]{
		margin:0; /* iPhone・iPad用 */
		padding:0;
		cursor:pointer;
    	border-radius:0; /* iPhone・iPad 角丸解除 */
    	-webkit-appearance:none; /* iPhone・iPad グラデーション解除 */
    }
    select,
    select option,
    select optgroup{
		padding:0 4px;
		font-style:normal;
		cursor:pointer;
    	/* セレクトデフォルトなら削除する */
    	-webkit-appearance:none; /* Safari グラデーション解除 */
    }
    ol,ul{
		list-style:none;
    }
    h1,h2,h3,h4,h5,h6,small{
		font-size:100%;
    }
    address{
		font-style:normal;
    } 
    footer .company address a:visited, footer .company address a:link{
        color: white;
        text-decoration: unset;
    }
    a,
    input{
		outline:none;
    }
    /* Basic Text Link */
    a{
		color:#333333; text-decoration:underline;
    }
    a:link{
		color:#333333; text-decoration:underline;
    }
    a:visited{
		color:#333333; text-decoration:underline;
    }
    a:hover{
		color:#333333; text-decoration:none;
    }
    a:focus{
		color:#333333; text-decoration:underline;
    }
    a:active{
		color:#333333; text-decoration:underline;
    }
    /* Common Styles */
    img{
		max-width:100%;
		height:auto;
    }
    ul,
    ol,
    .column{
		overflow:hidden;
		position:relative;
    }
    .mincho{
		font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "メイリオ", Meiryo, sans-serif;
    }
    .screen-reader-text{
		display: none;
    }
    .control_area{
        max-width: 1047px;
        margin: 0 auto;
        margin-top: -57px;
        letter-spacing: 1px;
        padding-bottom: 57px;
    }
    .nav-previous pre, .nav-next pre{
		font-weight: bold;
    }
    .nav-previous a, .nav-next a{
		text-decoration: none;
    }
    .nav-previous:hover, .nav-next:hover{
		opacity: 0.7;
    }
    .nav-previous{
		float: left;
    }
    .nav-next{
		float: right;
	}
	
    /* ========================================================================
	From（フォーム）
======================================================================== */
    form span.any,
    form span.must{
		display:inline-block;
		margin:0 10px;
		padding:0 8px;
		background:#aaaaaa;
		border-radius:3px;
		font-size:1.2rem;
		color:#ffffff;
		line-height:18px;
    }
    form span.must{
		background:#cc0000;
    }
    form input[type="text"],
    form input[type="email"],
    form input[type="tel"],
    form textarea{
		width:100%;
		height:34px;padding:0 10px;
		border:1px solid #cccccc;
    }
    form input.size, form input[type="tel"]{ width:300px; }
    form textarea{ height:auto; }
    form label{
		float:left;
		width:200px;
		margin:5px 0;
    }
    form input[type="radio"],
    form input[type="checkbox"]{
		margin:-2px 10px 0 0;
    }
    @media screen and (max-width: 767px){
    form input.size{ width:200px; }
    input[type="tel"]{ width:100%; }
    form label{ width:145px; }
    form label:nth-of-type(2n){ width:155px; }
    }
    
    /* ========================================================================
	Paging（ページング）
======================================================================== */
    .paging{
		padding: 0 195px 50px 195px;
		text-align:center;
    }
    .paging span{
		display:inline-block;
		padding:0 5px 10px;
		vertical-align:bottom;
    }
    .paging span.current{
        width: 30px;
		line-height: 30px;
		margin:0 5px 10px;
		padding:0;
		background:#666666;
		border:1px solid #666666;
		border-radius:2px;
		text-align:center;
		color:#ffffff;
    }
    .paging a{
        display: inline-block;
        width: 30px;
        line-height: 30px;
        margin: 0 3px 10px 3px;
        border: 1px solid #666666;
        border-radius: 2px;
        text-align: center;
        color: #333333;
        text-decoration: none;
        transition-duration: 0.2s;
    }
    .paging a:hover{
		background:#666666;
		color:#ffffff;
    }
    .paging a.prev{
        float: left;
    }
    .paging a.next{
		float: right;
    }
    .paging a.prev,
    .paging a.next{
		width:auto;
		border:none;
		font-weight: bold;
        font-size: 14px;
    }
    .paging a.prev pre,
    .paging a.next pre{
		font-weight: bold;
    }
    .paging a.prev:hover,
    .paging a.next:hover{
		background:none;
		color:#333333;
		text-decoration:underline;
    }
    @media screen and (max-width: 767px){
    .paging{
		padding:0 0 30px 0;
    }
    .paging span.current{
		width:30px;
		line-height:28px;
    }
    .paging a{
		width:30px;
		line-height:28px;
    }
    .paging a:hover{
		background:none;
		color:#333333;
    }
    .paging a.prev,
    .paging a.next{
		margin:0 5px 10px;
    }
    .paging a.prev:hover,
    .paging a.next:hover{
		text-decoration:none;
    }
    }

    /* ========================================================================
	Widget（共通パーツ）
======================================================================== */

/* ----------------------------------------
	widget_btn
---------------------------------------- */
    .widget_btn{
		text-align:center;
		font-size:0;
    }
    .widget_btn a,
    .widget_btn button{
		position:relative;
		display:inline-block;
		width:550px;
		padding:0 28px;
		border:1px solid #000000;
		border-radius:4px;
		text-align:center;
		font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "メイリオ", Meiryo, sans-serif;
		font-size:1.8rem;
		font-weight:bold;
		line-height:58px;
		letter-spacing:1px;
		text-decoration:none;
    }
    .widget_btn a::before,
    .widget_btn button::before{
		content:"";
		position:absolute;
		top:50%;
		right:16px;
		width:12px;
		height:16px;
		margin:-8px 0 0 0;
		background:url(../../img/common/arrow_01.png) no-repeat;
    }
    .widget_btn button{ background:#666666; border-color:#666666; color:#ffffff; }
    .widget_btn button::before{ background-image:url(../../img/common/arrow_02.png); }
    .widget_btn a.white{ border-color:#ffffff; color:#ffffff; }
    .widget_btn a.white::before{ background-image:url(../../img/common/arrow_02.png); }    

/* navi
---------------------------------------- */
    .widget_btn.navi{ width:1160px; margin:0 auto; }
    .widget_btn.navi a{ margin:30px 0 0 0; }
    .widget_btn.navi a:nth-of-type(-n+2){ margin-top:0; }
    .widget_btn.navi a:nth-of-type(2n){ margin-left:60px; }
    
    @media screen and (max-width: 767px){
    .widget_btn a,
    .widget_btn button{
		width:300px;
		padding:0 16px;
		font-size:1.4rem;
		line-height:40px;
    }
    .widget_btn a::before,
    .widget_btn button::before{
		right:10px;
		width:6px;
		height:8px;
		margin:-4px 0 0 0;
		background:url(../../img/common/arrow_01.png) no-repeat;
		background-size:6px 8px;
    }
    .widget_btn button::before{ background-image:url(../../img/common/arrow_02.png); background-size:6px 8px; }
    .widget_btn a.white::before{ background-image:url(../../img/common/arrow_02.png); background-size:6px 8px; }
    
/* navi
---------------------------------------- */
    .widget_btn.navi{ width:auto; }
    .widget_btn.navi a{ margin:0 0 10px 0; }
    .widget_btn.navi a:nth-of-type(-n+2){ margin-top:0; }
    .widget_btn.navi a:nth-of-type(2n){ margin-left:0; }
    }
    
/* ----------------------------------------
	widget_contact
---------------------------------------- */
    .widget_contact{
		padding:0 0 30px 0;
		background:#666666;
    }
    .widget_contact h2{
		color:#ffffff;
    }
    .widget_contact ul li{
		float:left;
		width:30%;
		margin:0 0 0 2.5%;
		text-align:center;
		font-size:2.2rem;
		color:#ffffff;
		letter-spacing:3px;
    }
    .widget_contact ul li img{
		display:block;
		margin:0 auto 10px;
    }
    .widget_contact a{
		position:relative;
		display:block;
		height:180px;
		padding:40px 30px 0;
		background:#999999;
		border-radius:4px;
		color:#ffffff;
		text-decoration:none;
    }
    .widget_contact a::before{
		content:"";
		position:absolute;
		top:50%;
		right:16px;
		width:12px;
		height:16px;
		margin:-8px 0 0 0;
		background:url(../../img/common/arrow_02.png) no-repeat;
    }
    
    @media screen and (max-width: 767px){
    .widget_contact{
		padding:0 10px;
    }
    .widget_contact ul li{
		float:none;
		width:auto;
		margin:0 0 10px 0;
		font-size:1.8rem;
    }
    .widget_contact a{
		height:auto;
		padding:20px;
    }
    .widget_contact a::before{
		right:10px;
		width:6px;
		height:8px;
		margin:-4px 0 0 0;
		background:url(../../img/common/arrow_02.png) no-repeat;
		background-size:6px 8px;
    }
    }
    
/* ----------------------------------------
	widget_works
---------------------------------------- */
    .widget_works{
		padding:0 0 60px 0;
		font-size:0;
    }
    .widget_works li{
		overflow:hidden;
		position:relative;
		display:inline-block;
		width:25%;
		vertical-align:top;
		font-size:1.8rem;
    }
    .widget_works li:nth-child(3),
    .widget_works li:nth-child(6){
		width:50%;
    }
    .widget_works li:nth-child(7){
		position:absolute;
		top:0;
		left:0;
    }
    .widget_works li img{
		width:100%;
    }
    .widget_works li:nth-child(5) img{
		max-width:none;
		width:auto;
		height:100%;
    }
    @media screen and (max-width: 767px){
    .widget_works{
		padding-bottom:30px;
    }
    .widget_works li{
		float:left;
		width:50%;
		font-size:1.4rem;
    }
    .widget_works li:nth-child(3){ width:100%; }
    .widget_works li:nth-child(7){ position:relative; }
    .widget_works li:nth-child(5) img{
		width:100%;
		height:auto;
    }
    }
    
/* on
---------------------------------------- */
    .widget_works .on{
		display:none;
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		padding:20px;
    }
    .widget_works .on p{
		display:table-cell;
		padding:0 5px;
		background:rgba(255,255,255,0.6);
		text-align:center;
		vertical-align:middle;
		font-weight:bold;
		line-height:1.4;
		letter-spacing:4px;
    }
    .widget_works .on p span{
		display:block;
		padding:4px 0 0 0;
		font-size:2.4rem;
    }    
/* ----------------------------------------
	widget_list
---------------------------------------- */
    ul.widget_list{
		max-width: 1055px;
		width: 100%;
		margin: auto;
    }
    .widget_list li img.frame{
		position:absolute;
		top:0;
		overflow: hidden;
		display: none;
    }
    .widget_list li img.in{
		height:auto;
		width: 100%;
    }
    .widget_list li .widget_btn{
        padding: 10px 20px 30px;
    }
    .widget_list li .widget_btn a{
		width:100%;
		font-size:1.6rem;
    }
    .widget_list li .widget_btn time{
		padding:0 1em 0 0;
		color:#999999;
    }
    
    @media screen and (max-width: 767px){
    .widget_list{
		padding:0 0 10px 0;
    }
    .widget_list li > a{
		width:320px;
		height:204px;
    }
    .widget_list li img.in{
		max-width:320px;
		max-height:204px;
    }
    .widget_list li .widget_btn{
		padding:10px;
    }
    .widget_list li .widget_btn a{
		padding:6px 16px;
		font-size:1.4rem;
		line-height:2;
    }
    .widget_list li .widget_btn time{
		display:block;
    }
    }
    
/* ----------------------------------------
    widget_navi
---------------------------------------- */
    .widget_navi{
		padding:0 0 60px 0;
		text-align:center;
		font-size:0;
    }
    .widget_navi li{
		display:inline-block;
		padding:0 10px 0 0;
		font-size:1.4rem;
    }
    .widget_navi li::before{
		content:"｜";
		padding:0 10px 0 0;
    }
    .widget_navi li:first-child::before{
		content:"";
    }
    .widget_navi li a{ text-decoration:none; }
    .widget_navi li a:hover{ text-decoration:underline; }
	
	@media screen and (max-width: 767px){
    .widget_navi{
		padding-bottom:20px;
    }
    .widget_navi li{
		padding-bottom:10px;
    }
    }
    
/* ----------------------------------------
	widget_step
---------------------------------------- */
    .widget_step li{
		overflow:hidden;
		margin:0 0 15px 0;
		background:#666666;
    }
    .widget_step li:last-child{
		margin:0;
    }
    .widget_step p.image{
		float:left;
		width:580px;
    }
    .widget_step dl{
		position:relative;
		float:right;
		width:580px;
		height:325px;
		padding:0 15px 0 130px;
		color:#ffffff;
    }
    .widget_step li:nth-child(even) p.image{ float:right; }
    .widget_step li:nth-child(even) dl{ float:left; }
    .widget_step dl dt{
		margin:0 0 12px 0;
		padding:28px 0 12px 0;
		border-bottom:1px dotted #ffffff;
		font-size:2.2rem;
    }
    .widget_step li:nth-child(3) dl dt{
		letter-spacing:-1px;
    }
    .widget_step dl dt span{
		position:absolute;
		top:15px;
		left:15px;
		width:100px;
		height:295px;
		padding:14px 0 0 0;
		background:#999999;
		text-align:center;
    }
    .widget_step dl dd{
		line-height:1.7;
    }
    .widget_step .widget_btn{
		position:absolute;
		bottom:15px;
    }
    .widget_step .widget_btn a{
		width:435px;
		font-size:1.6rem;
    }
    @media screen and (max-width: 767px){
    .widget_step li{
		margin:0 0 10px 0;
    }
    .widget_step p.image{
		float:none;
		width:auto;
    }
    .widget_step dl{
		float:none;
		width:auto;
		height:auto;
		padding:0 10px 10px;
    }
    .widget_step li:nth-child(even) p.image{ float:none; }
    .widget_step li:nth-child(even) dl{ float:none; }
    .widget_step dl dt{
		display:table-cell;
		width:300px;
		height:79px;
		padding:10px 0 10px 65px;
		vertical-align:middle;
		font-size:1.8rem;
		line-height:1.4;
    }
    .widget_step li:nth-child(3) dl dt{
		letter-spacing:0;
    }
    .widget_step dl dt span{
		top:10px;
		left:10px;
		width:auto;
		height:auto;
		padding:10px;
    }
    .widget_step dl dt img{
		width:35px;
    }
    .widget_step dl dd{
		padding:10px 0 0 0;
    }
    .widget_step .widget_btn{
		position:static;
		margin-top:10px;
    }
    .widget_step .widget_btn a{
		width:100%;
		font-size:1.4rem;
    }
    }
    #loader {
		width: 100%;
		height: 100%;
		margin: 0;
		background: white;
		background-size: cover;
		opacity: 1.0;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10000; /*一番前面に出るように（今回はbxSlidrの矢印が9999だったのでそれを超えるようにしました）*/
    }
    .bx-wrapper .bx-viewport ul{
        overflow: unset !important;
    }
    .meetsmore{
        position: absolute;
        right: 0;
    }
/* ----------------------------------------
	IEはメディアクエリ下で動かないため、切り離す
---------------------------------------- */
    @-webkit-keyframes height_change{
        from{
            height: 116px;
        }
        to {
            height: 65px !important;
        }
    }
    @keyframes height_change{
        from{
            height: 116px;
        }
        to{
            height: 65px !important;
        }
    }
    
        @-webkit-keyframes height_change_header{
        from{
            margin-top: 40px;
        }
        to {
            margin-top: 15px !important;
        }
    }
    @keyframes height_change_heaeder{
        from{
            margin-top: 40px;
        }
        to{
            margin-top: 15px !important;
        }
    }