@charset "utf-8";
/* CSS Document */

@media only screen and (max-width:1320px){
	
	#content { width: 85%; }
    
	.content_float_box { width: 100%; }
    .topics_content{ background-size: contain; }
    .topics_wrapper{ width: 70%; }
}


@media only screen and (max-width:1024px){
	
	header #pc_nav { width: 48%; }
	header #pc_nav .menu ul { width: 85%; }
    .topics_content{ background-size: contain; }
    .topics_wrapper{ width: 90%;padding-top: 100px; background-size: cover; }
    
    .content_float_box { width: 100%; display: flex; flex-wrap: wrap; }
	.content_float_box .content_left_box {
		width:calc(30% - 40);
		display: flex;
		flex-flow: column;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
        margin-top: 60px;
	}
	.content_float_box .content_left_box .no { top: -20px; right: -20px; font-size: 2.5em; }
	.content_float_box .content_left_box .no::after { top: 60px; right: 3px; width: 70px; }
	
	.content_left_box a { font-size: calc(100% + 0.1vw); margin-top: 15px; }
	.content_left_box .button { margin: 0px auto 0 auto; }
    
    /*事業内容*/
    .service_item{
        margin-top: 60px;
        width: calc(50% - 60px / 2);
    }
    .service_button2 { width: 100%; margin: 0px auto; text-align: center; position:static;}

}


@media only screen and (max-width:768px){
	
	/* header */
	header { margin: 20px 0; }
	header .logo { position: relative; width: 270px; margin: 0 0 0 40px; z-index: 9999; }
	header .logo a { font-size: .8em; line-height: 1em; }
	header .logo a span { font-size: .35em; line-height: 1em; margin-top: 5px; }
	
	header #pc_nav { display: none; }

	/* content */
	#content { width: 90%; margin-bottom: 50px; }
	
	/* 新着情報 */
    .topics_content{ background-size: contain; margin-bottom: 60px;/*background-image: url("../image/background_text_tb.png");*/}
    .topics_wrapper{ width: 90%; padding-top: 100px; }
    
    /*ロゴ*/
    
	.content_float_box { width: 100%; height: auto; margin: 0 auto; display: flex; justify-content: space-between; }
	.content_left_box { width:100%; height: auto; float: left; text-align: center; }
	
	/*.nav { display: none; }*/
	
	/* slide */
	#vegas { height: 60vh; }
	#vegas .caption { left: 5%; font-size: 2.5em; }
	
	/* sp menu */
	.button_container {
		display: block;
  		position: fixed;
  		top: 3%;
  		right: 5%;
  		height: 27px;
  		width: 45px;
  		cursor: pointer;
  		z-index: 100;
  		-webkit-transition: opacity .25s ease;
  		transition: opacity .25s ease;
		z-index: 2000;
	}
	.button_container:hover {
  		opacity: .7;
	}
	.button_container.active .top {
  		-webkit-transform: translateY(11px) translateX(0) rotate(45deg);
        transform: translateY(11px) translateX(0) rotate(45deg);
  		background: #fff;
	}
	.button_container.active .middle {
  		opacity: 0;
  		background: #fff;
	}
	.button_container.active .bottom {
  		-webkit-transform: translateY(-18px) translateX(0) rotate(-45deg);
    	transform: translateY(-18px) translateX(0) rotate(-45deg);
		background: #fff;
	}
	.button_container span {
		background: #fff;
		border: none;
		height: 5px;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-transition: all .35s ease;
		transition: all .35s ease;
		cursor: pointer;
	}
	.button_container span:nth-of-type(2) {
		top: 15px;
	}
	.button_container span:nth-of-type(3) {
		top: 30px;
	}

	.overlay {
		display: block;
		position: fixed;
		background: #004EA2;
		top: 0;
		left: 0;
		width: 100%;
		height: 0%;
 		 opacity: 0;
		visibility: hidden;
		-webkit-transition: opacity .35s, visibility .35s, height .35s;
		transition: opacity .35s, visibility .35s, height .35s;
		overflow: hidden;
	}
	.overlay.open {
		opacity: 1;
		visibility: visible;
		height: 100%;
		z-index: 1000;
	}
	.overlay.open li {
		-webkit-animation: fadeInRight .5s ease forwards;
		animation: fadeInRight .5s ease forwards;
		-webkit-animation-delay: .35s;
		animation-delay: .35s;
	}
	.overlay nav {
		position: relative;
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		width: 70%;
		margin: 0 auto;
	}
	.overlay ul {
		list-style: none;
		padding: 0;
		margin: 0 auto;
		display: inline-block;
		position: relative;
		height: 100%;
	}
	.overlay ul li {
		display: block;
		height: 15%;
		height: calc(100% / 6);
		min-height: 30px;
		position: relative;
		opacity: 0;
	}
	.overlay ul li::before {
    	content: "";
    	position: absolute;
    	top: 50%;
    	left: -50px;
    	width: 30px;
    	height: 1px;
    	background: #fff;
	}
	.overlay ul li a {
		display: block;
		position: relative;
		padding: 1em 0;
		font-size: 1.5em;
		font-family: source-han-sans-japanese, sans-serif;
		font-style: normal;
		font-weight: 400;
		color: #fff;
		text-decoration: none;
		line-height: 2em;
		letter-spacing: .05em;
		overflow: hidden;
	}
	.overlay ul li a span {
		font-size: .6em;
		color: #627eb7;
		margin-left: 20px;
	}
	.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
		width: 100%;
	}

	@-webkit-keyframes fadeInRight {
		0% { opacity: 0; left: 20%; }
		100% { opacity: 1; left: 0; }
	}

	@keyframes fadeInRight {
		0% { opacity: 0; left: 20%; }
		100% { opacity: 1; left: 0;	}
	}
	
	.button_container span.change-color { background-color: #004EA2; }
	
	.sns { display: flex!important; margin-top: 30px; margin-left: -52px; }
	.sns::before { width: 0!important; }
	.sns-icon01 { width: 50px; height: 50px; margin-right: 20px; }
	.sns-icon01 a { display: block; width: 50px; height: 50px; background: url("../image/common/instagram_icon_01.png") no-repeat; transition: .5s; }
	.sns-icon01 a:hover { background: url("../image/common/instagram_icon_02.png") no-repeat; }
	.sns-icon02 { width: 50px; height: 50px; }
	.sns-icon02 a { display: block; width: 50px; height: 50px; background: url("../image/common/mail_icon_01.png") no-repeat; transition: .5s; }
	.sns-icon02 a:hover { background: url("../image/common/mail_icon_02.png") no-repeat; }
	
	/* top */
	.content_float_box { width: 100%; display: flex; flex-wrap: wrap; }
	.content_float_box .content_left_box {
		width: 26%;
		display: flex;
		flex-flow: column;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}
	.content_float_box .content_left_box .no { top: -20px; right: -20px; font-size: 2.5em; }
	.content_float_box .content_left_box .no::after { top: 60px; right: 3px; width: 70px; }
	
	.content_left_box a { font-size: calc(80% + 0.4vw); margin-top: 15px; }
	.content_left_box .button { margin: 0px auto 0 auto; }
	
	/* company */
	.company-box .works-list li { font-size: .9em; }
    
    .syaze_list li {
    font-size: 1.5em;
    line-height: 1.6em;
    }
    
    .company-box dl{font-size: .7em;}
    
    /*事業内容*/
    
    .service_container{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .service_item{
        margin-top: 60px;
        /*width: calc(% - 60px / 2);*/
    }
    
    .service_button{
        width: 80%;
    }
    
    .service_no_button{
        width: 80%;
    }

}



@media only screen and (max-width:640px){
	
	/* header */
	header { margin: 20px 0; }
	header .logo { position: relative; width: 240px; margin: -3px 0 0 20px; z-index: 9999; }

	
	/* sp menu */
	.button_container { height: 27px; width: 35px; }
	.button_container span { height: 4px; }
	.button_container span:nth-of-type(2) { top: 12px; }
	.button_container span:nth-of-type(3) { top: 24px; }
	.button_container.active .top {
		-webkit-transform: translateY(9px) translateX(0) rotate(45deg);
		transform: translateY(8px) translateX(0) rotate(45deg);
		background: #fff;
	}
	.button_container.active .bottom {
		-webkit-transform: translateY(-16px) translateX(0) rotate(-45deg);
		transform: translateY(-16px) translateX(0) rotate(-45deg);
		background: #fff;
	}
    
    /*新着情報*/
    .topics_wrapper{ width: 90%; }
    .topics_content{ background-size: contain; /*background-image: url("../image/background_text_tb02.png");*/}
    
    /*新着情報　ボタン*/
    .topics_button{ width: 100%;}
    .topics_button a{ font-size: 15px;}
    
    /*ロゴ*/
    header .logo { width: 280px; }
	
	.overlay nav { width: 55%; }
	.overlay ul li a { font-size: 1em;  }

	.main_contents { width: 100%; margin: 0 auto; margin-bottom: 0px; padding: 0px 0px; text-align: left; background: #F2F2F2; }
	.main_contents_box01 { width: 100%; margin: 0 auto; background-color: rgba(255,255,255,0); }
	.main_contents_box02 {
		width: 94%;
		max-width: 94%;
		margin: 0 auto;
		padding: 0px 0px 40px 0px;
		font-weight: 300;
		color: #444;
		background: rgba(255,255,255,0);
	}

	.contents_l_box01 { display: none; width: 100%; float: left; padding-top: 80px; background: rgba(51,175,131,1); }
	.contents_r_box01 { width: 100%; float: right; padding-top: 25px; }

	.main_tit01 { padding-bottom: 20px; text-align: center; }
	.main_tit01 table { width: 100%; }
	.main_tit_td01 h1 { font-size: 1.3em; font-weight: 600; margin: 0px; padding: 0px; color: #222; }
	.main_tit_td02 { font-size: .9em; font-weight: 400; vertical-align: middle; padding-left: 10px; }

	.main_tit02 { display: none; }

	.sub_tit01 { padding-bottom: 10px; }
	.sub_tit_td01 h2 { font-size: 17px; font-weight: 500; margin: 0px; padding: 0px; line-height: 28px; color: #33AF83; }
	.sub_tit_td02 { padding-left: 30px; }
	
	/* top */
	#vegas { height: 70vh; }
	#vegas .caption { top: 55%; left: 5%; padding-left: 30px; font-size: 2em; }
	#vegas .caption p { margin-top: -10px; }
	#vegas .caption span { font-size: .4em; line-height: 1.8em; margin-top: 10px; }
	#vegas .caption .sp-br { display: block; }
	
	.scroll-Block { display: none; }
	
	.content_float_box .content_left_box { width: 70%; margin: 0 auto; }
	.content_float_box .content_left_box a { font-size: calc(130% + 0.4vw); margin-top: 15px; }
	.content_float_box .content_left_box .button { width: 80%; font-size: .5em; margin-bottom: 50px; }
	
	
	/* ※CONTACT */
	.contact-box h2 { font-size: 1.4em; margin: 50px 0 40px 30px; }
	
	.toi_sub_tit01 { font-size: 15px; font-weight: 500; line-height: 25px; color: #222; margin-bottom: 25px; }

	.toi_m_tit01 { 
		padding-bottom: 10px;
		padding-left: 15px;
		font-size: 40px;
		font-weight: 400;
		line-height: 45px;
		border-left: 5px rgba(69,177,199,1) solid;
	}
	.toi_m_tit02 {
		padding-left: 15px;
		font-size: 18px;
		color: rgba(69,177,199,1);
		border-left: 5px rgba(69,177,199,1) solid;
		margin-bottom: 30px;
	}

	.toi_box01 { padding: 20px; border: 5px #DDD solid; background: rgba(255,255,255,0.5); }
	.toi_box01 a { text-align: center; color: #009964; }

	.toi_tit01 { width: 100%; padding-bottom: 5px; text-align: center; }
	.toi_tit01 h1 { margin: 0px; font-size: 28px; font-weight: 600; line-height: 35px; color: #444; }

	.toi_txt01 { line-height: 22px; text-align: justify; padding-bottom: 20px; }
	.toi_txt02 { line-height: 25px; text-align: justify; padding-bottom: 0px; margin-bottom: 10px; font-size: 15px; }
	.toi_txt02 br { display: block; }

	.toi_btn_l { text-align: center; margin-left: 40%; float: left; }
	.toi_btn_l input { width: 80px; }

	.toi_btn_r { width: 100px; text-align: center; margin-left: 20px; float: left; }
	.toi_btn_r input { width: 80px; }

	.toi_td1 { padding: 8px 0px 5px 0px; color: #222; font-weight: 400; }
	.toi_td1 span { color: #666; font-size: 12px; }

	.toi_td2 { padding: 0px; color: #222; }
	.toi_td3 { clear: both; height: 15px; border-bottom: 1px #AAA dashed; }

	.toi_txt1 { font-size: 13px; font-weight: 400; margin-bottom: 20px; }
	.toi_tel1 { font-size: 17px; color: #3578D9; font-weight: bold; }
	.toi_input1 { height: 25px; float: left; border-color: #999; border-width: 0px 0px 1px 0px; border-style: dotted; }

	.from_text01 { padding: 3px; border: 1px #BBB solid; width: 60%; }
	.from_text02 { padding: 3px; border: 1px #BBB solid; width: 30%; }
	.from_text03 { padding: 3px; border: 1px #BBB solid; width: 95%; }

	.toi_space_40_01 { clear: both; height: 40px; }
	
	
	/* footer */
	#footer span { margin-right: 0; }
	#footer .company-name { font-size: .9em; font-weight: 500; }
	.footer_nav ul { width: 90%; margin: 10px auto 30px; padding: 0; float: none; }
	.footer_nav li { display: block; padding: 10px 0; margin: 0; font-size: .9em; text-align: left; border-bottom: 1px #888 solid; }
	
	
	/* hamburger_menu */
	#hamburger_nav {
		position: fixed;
		top: 0;
		left: -240px;
		width: 240px;
		height: 100vh;
		text-align: center;
		background: #373737;
	}

	#hamburger_btn {
		width: 100px;
		height: 100px;
		top: 0;
		left: 0;
		text-indent: -9000px;
		background: #7E7E7E;
	}
	
	
	/* content */
	#content {
		width: 85%;
		margin: 0 auto;
		margin-bottom: 60px;
		padding: 0;
	}

	
	/* home_content */
	.home_comment{ width: 100%; height: auto; margin: 0 auto; text-align: center; }

	
	.nav { display: none; }
	#nav { display: block; }

	
	/* index_content */
	.content_float_box { flex-direction: column; }
	.content_left_box { width: 100%; }
	
	
	/* space */
	.space01 { width: 100%; height: 20px; }
	.short_space { width: 100%; height: 40px; }
	
	
	/* common */
	.page-head { padding: 100px 0 20px 0; }
	.page-head-ttl__main { font-size: 1.3em; }
	.page-head-ttl__sub { font-size: .7em; }
	
	
	/* company */
	.company-box h2 { font-size: 1.4em; margin: 50px 0 40px 30px; }
	.company-box h3 { font-size: 1.2em; margin: 40px 0 20px 30px; }
	
	.company-box dl { display: block; }
	.company-box dt { width: 100%; padding: .6em; box-sizing: border-box; }
	.company-box dd { width: 100%; padding: .6em 0; }
	
	.company-box .works-list li { width: 100%; font-size: .8em; text-align: left; }
    .company-box　li{ margin-bottom:1.6em; }
    .dd_space{display: none;}
	
	/* footer */
	#footer { padding: 0; }
	#footer p { font-size: 13px; }
	
	.main_contents { width: 100%; margin: 0 auto; margin-bottom: 0px; padding: 0px 0px; text-align: left; background: #F2F2F2; }
	.main_contents_box01 { width: 100%; margin: 0 auto; background-color: rgba(255,255,255,0); }
	.main_contents_box02 {
		width: 94%;
		max-width: 94%;
		margin: 0 auto;
		padding: 0px 0px 40px 0px;
		font-weight: 300;
		color: #444;
		background: rgba(255,255,255,0);
	}

	
	/* ClearFixElements */
	.wideslider ul:after { content: "."; height: 0; clear: both; display: block; visibility: hidden; }
	.wideslider ul { display: inline-block; overflow: hidden; }
	
	
	/* page top */
	#page-top a {
		width: 80px;
		padding: 12px 0px;
		color: #0f214e;
		border-radius: 5px;
		text-decoration: none;
		border: none;
		background-color: rgba(255,255,255,1);
	}
    
    .syaze_list li {
    font-size: 1.2em;
    line-height: 1.3em;
}
    
    .TEl00{
        display: block;
        margin-left: 0em;
    }

    .TEl02{
        display: block;
        margin-left: 0em;
    }

    .TEl03{
        display: block;
        margin-left: 0em;
    }

    .TEl04{
        display: block;
        margin-left: 0em;
    }
    
     /*事業内容*/
    .service_item{
        margin-top: 30px;
        width: 100%;
    }
    
    .service_text01{
        margin-top: 40px;
        text-align: left;
    }
    
    .service_text01 P{
        font-size: 1em;
    }
    
    .service_container{
        flex-direction: column;
    }
    
    .service_content_img{
    width: 100%;
    }

    .service_text02{
        width: 100%;
    }
    
    .service_text02 h4{
        margin-top: 10px;
    }
    
    .footer-inner{
        width: 90%;
        text-align: center;
    }
    
    .shimada,.shizuoka,.huzieda,.seibu{
        margin-right: 0;
    }

    .tel01,.tel02,.tel03,.tel04{
        margin-left: 0;
    }
    
    .shikaku{
     white-space: normal;
    }
    
    .TEl00,.TEl02,.TEl03,.TEl04{ margin-left: 0; }
    .no01,.no02,.no03{ margin-left: 0; }
}

@media only screen and (max-width:375px){
        
    .topics_wrapper{
        width: 90%;
    }
    
    .topics_ul{
        padding-left: 15px;
    }
    
    .topics_content{
        background-size:contain;
    }
    
    .topics_li{
        display: flex;
        padding:15px;
        border-bottom:1px solid #1E1E1E;
        flex-direction: column;
}

    .day{
      margin-right: 0px;
    }
    
    .syaze_list li {
    font-size: 1.2em;
    line-height: 1.3em;
    }
    
    .s01,.s02,.s03,.s04,.s05,.s06{ margin-bottom: 1.4em;}
    
    
}

@media only screen and (max-width:414px){
    
    header .logo { position: relative; width: 220px; margin: -3px 0 0 20px; z-index: 9999; }
    
    .topics_wrapper{
        width: 90%;
    }
    
    .topics_ul{
        padding-left: 15px;
    }
    
    .topics_content{
        background-size: cover;
        padding-top: 60px;
        background-image: url("../image/background_text_sp.png");
    }
    
    .topics_li{
        display: flex;
        padding:15px;
        border-bottom:1px solid #1E1E1E;
        flex-direction: column;
}

    .day{
      margin-right: 0px;
    }
    
    a.topics_nav_mae{
    font-size: 1em;
}
    a.topics_nav_itiran{
    font-size: 1em;
}
    a.topics_nav_tugi{
    font-size: 1em;
}
}

@media only screen and (max-width:320px){
    
    .topics_wrapper{
        width: 90%;
    }
    
    .topics_ul{
        padding-left: 15px;
    }
    
    .topics_content{
        background-size: contain;
        padding-top: 20px;
    }
    
    .topics_li{
        display: flex;
        padding:15px;
        border-bottom:1px solid #1E1E1E;
        flex-direction: column;
}

    .day{
      margin-right: 0px;
    }
    
    .content_float_box .content_left_box a { font-size: calc(100% + 0.1vw); margin-top: 15px; }
    
    a.topics_nav_mae{
    font-size: 0.9em;
    margin-right: 20px;
}
    a.topics_nav_itiran{
    font-size: 0.9em;
}
    a.topics_nav_tugi{
    font-size: 0.9em;
    margin-left: 20px;
}
}