/*** MAINIMG ****************************************************************/
.mainimg  { position: relative; overflow:hidden;}
.sound_btn { position: absolute; top: 20px; right: 20px; z-index: 9999; color: #fff; font-size:75%; letter-spacing: 2px; }
.sound_btn span { cursor: pointer;}
.sound_btn span:hover { opacity: 0.7;}
.video_wrapper {
    position: relative;
    width: calc(100vw - 145px);
    height: 100vh;
    overflow: hidden;
}
.video_wrapper > video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    min-width: 100%;
    min-height: 100%;
}
.scroll { 
    position:absolute; bottom:0;  left:0; right: 0; margin: auto; z-index: 99999999999999;
    width: 120px; height: 60px;
    background: url("../../image/top/scroll.png") no-repeat top left;
    background-size: 100% auto;
    z-index: 9999;
}
.scroll span { position: absolute; bottom:-3px; display: block; text-align: center; font-size: 12px; width: 120px; }
.scroll:before {
    content: "";
    position:absolute; bottom:0;  left:0; right: 0; margin: auto; z-index: 9999;
	width:21px; height:37px;
    background: url("../../image/top/scroll2.png") no-repeat;
	animation:
		circlemove 1.6s ease-in-out infinite,
		cirlemovehide 1.6s ease-out infinite;
}
@keyframes circlemove{
      0%{top:-50px;}
     100%{top:-20px;}
 }
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
	100%{opacity:0;}
 }
 .mainslider { display: none;}
@media only screen and (max-width:960px){
    .mainimg .slider li { width: 100vw; overflow: hidden;}
    .mainimg .slider img { width: 100%; height: 100vh; object-fit: cover;}
    .mainimg  { position: relative; width:100%; }
    .mainlogo { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width:80px; height:385px; z-index: 99999;}
    .mainlogo img { width: 100%; height: auto;}
    .mainslider { display: block;}
}


/*====================================================================================================
  TOPPAGE
====================================================================================================*/
#content { position: relative;}
#content .waku { position: relative; background: #fff; overflow: hidden;}
#toppage { position: relative; background: #fff;  z-index: 999;}
#toppage h3 {}
#toppage h3 small { display: none;}
#toppage .come { font-size: 112.5%; line-height: 220%; text-align: center;}
#toppage .b_link { position: relative; margin:50px auto 0; max-width: 235px;}
#toppage .b_link a { 
    display: block;
    text-align: center;
    padding: 10px;
    color: #000;
    text-decoration: none;
    background:
        url("../image/arrow_br.png") no-repeat left center,
        url("../image/arrow_bl.png") no-repeat right center;
    background-size: 44px auto;
    border: 1px solid #000;
    transition:0.3s;
}
#toppage .b_link::before,
#toppage .b_link::after{
    content:"";
    position: absolute;
    background:rgba(28,46,89,0.80);
    width: 0;
    height:1px;
    transition: all 0.2s linear;
}
#toppage .b_link::before{ right: 0; bottom: 0;}
#toppage .b_link::after{ left: 0; top: 0;}
#toppage .b_link span { display: block;}
#toppage .b_link span::before,
#toppage .b_link span::after{
  content:"";
  position: absolute;
  background:rgba(28,46,89,0.80);
  width:1px;
  height:0;
  transition: all 0.1s linear;
}
#toppage .b_link span::before{ left: 0; bottom: 0;}
#toppage .b_link span::after{ right: 0; top: 0;}
@media only screen and (min-width:960px){
    #toppage .b_link a:hover { 
        background:none;
        border:1px solid #fff;
        background:
            url("../image/arrow_br2.png") no-repeat left center,
            url("../image/arrow_bl2.png") no-repeat right center;
        background-size: 44px auto;
    }
    #toppage .b_link:hover::before,
    #toppage .b_link:hover::after{ width: 100%;}
    #toppage .b_link:hover::after { transition-delay: 0s;}
    #toppage .b_link:hover::before{ transition-delay: 0.3s;}
    #toppage .b_link:hover span::before,
    #toppage .b_link:hover span::after {height: 100%;}
    #toppage .b_link:hover span::before{ transition-delay: 0.5s;}
    #toppage .b_link:hover span::after{ transition-delay: 0.2s;}
    #toppage .b_link:hover a { color: #1c2e59;}
}
@media only screen and (max-width:960px){
    #toppage h3,
    #toppage h3 span{
        position: relative;
        margin-bottom: 40px !important;
        font-weight: normal !important;
        font-size:18px !important;
        line-height: 180% !important;
        letter-spacing: 4px !important;
    }
    #toppage h3 small {
        display: block;
        margin-bottom:25px;
        font-size: 10px;
        color:#1c2e59;
        letter-spacing: 2px;
    }
    #toppage h3::before {
        display:block; clear: both; content:"";
        position: absolute; top: 17px; left:-40px;
        width:30px; height: 1px; background: #1c2e59;
    }
    #toppage .come  { font-size: 100%; line-height: 240%; text-align: left;}
    #toppage .b_link { margin-top: 80px; max-width:inherit;}
    #toppage .cont { display:block; padding:100px 40px 140px;}
}


/*** HISTORY ****************************************************************/
#toppage .history { position: relative; padding: 140px 0; margin: auto; max-width: 1100px;}
#toppage .history .cont {
    position:relative;
    margin: auto;
    padding: 55px 40% 55px 0;
    width:98%;
    max-width: 1100px;
    border: 1px solid #000;
    box-sizing: border-box;
}
#toppage .history .cont::before,
#toppage .history .cont::after {
    display: block; clear: both; content:"";
    position: absolute; left: -4px; width:calc(100% + 8px); height: 6px;
}
#toppage .history .cont::before {
    top: -3px;
    background:
        url("../image/hishigata.png") no-repeat left top,
        url("../image/hishigata.png") no-repeat right top;
    background-size: 6px auto;
}
#toppage .history .cont::after {
    bottom: -3px;
    background:
        url("../image/hishigata.png") no-repeat left bottom,
        url("../image/hishigata.png") no-repeat right bottom;
    background-size: 6px auto;
}
#toppage .history h3 { margin: auto; width:28px; }
#toppage .history h3 span {
    position: relative;
    display: table-cell;
    writing-mode: vertical-rl;
    padding:0 0 75px;
    width: 28px;
    font-weight: normal;
    font-size:28px; height:365px;
    line-height:28px;
    letter-spacing:8px;
    text-align: center;
    vertical-align: middle;    
    box-sizing: border-box;
    background: #fff;
}
#toppage .history h3 span img  { width: 28px; height: auto;}
#toppage .history .come { }
#toppage .history .b_link { }
#toppage .history .photo1 {
    position: absolute; top: 0; bottom: 0; right:0;
    margin: auto;  width:40%; max-height: 590px; 
}
#toppage .history .photo1 img { width:100%;}
@media only screen and (max-width:960px){
    #toppage .history { padding:0;}
    #toppage .history .cont { width:100%; border:none; padding:100px 40px 140px;}
    #toppage .history .cont::before,
    #toppage .history .cont::after { display: none;}
    #toppage .history h3 { width:auto; }
    #toppage .history h3 span {
        writing-mode:horizontal-tb;
        padding:0;
        width:100%; height: auto;
        text-align:left;
    }
    #toppage .history .come { }
    #toppage .history .b_link { }
    #toppage .history .photo1 { position:relative; top: 0; left: 0; margin: auto;  width:100%; height: auto; }
    #toppage .history .photo1 img { height: 400px; object-fit: cover;}    
}


/*** NEWS *******************************************************************/
#toppage .news { padding: 130px 0; background: #f6f4f0;}
#toppage .news .cont { position: relative; margin: auto; width: 100%; max-width:1000px; overflow: hidden;}
#toppage .news .cont h3 { 
    float: left;
    padding-top: 20px;
    width: 290px;
    font-weight: normal;
    font-size:28px;
    text-align: center;
    letter-spacing:4px;
}
#toppage .news .b_link2 { position: absolute; top:60px; width:290px; text-align: center;}
#toppage .news .b_link2 a { letter-spacing: 2px; color:#b69118; text-decoration: none;}
#toppage .news_list { float: right; width:calc(100% - 290px);}
#toppage .news_list ul { overflow: hidden; }
#toppage .news_list ul+ul { margin-top: 20px;}
#toppage .news_list ul li { float: left; line-height: 22px;}
#toppage .news_list ul li+li { margin-left: 30px;}
#toppage .news_list ul li:nth-child(1) { width: 80px;}
#toppage .news_list ul li:nth-child(2) { width: 90px;}
#toppage .news_list ul li:nth-child(3) { width: calc(100% - 230px);}
#toppage .news_list ul li:nth-child(1) { font-size: 80%; color:#777;  font-style: italic;}
#toppage .news_list ul li:nth-child(2) { font-size: 75%; color:#fff; text-align: center;}
#toppage .news_list .cate1 { background: #b83821;}
#toppage .news_list .cate2 { background: #1c2e59;}
#toppage .news_list ul li:nth-child(3) a { font-size:90%; color:#222; text-decoration: none;}
#toppage .news_list ul.kotei {margin-top: 20px; }
#toppage .news_list ul.kotei li {
	padding-bottom:10px;
	width:auto;
	font-style: normal;
	font-size: 100%;
	color: #222;
    border-bottom: 1px solid #ccc;
}
@media only screen and (min-width:960px){
    #toppage .news_list ul li:nth-child(3) a:hover { text-decoration: underline;}
}
@media only screen and (max-width:960px){
    #toppage .news { padding: 0;}
    #toppage .news .cont { position: relative;}
    #toppage .news .cont h3 { float:none; padding-top:0; width:100%; text-align: left;}
    #toppage .news .b_link2 { position:absolute; top: 160px; right: 40px; font-size: 10px;  width: auto;}
    #toppage .news .b_link2 a { display:block; padding-right: 50px; height:40px; background:url("../image/arrow_gr.png") no-repeat center right;}
    #toppage .news_list { float:none; width:100%;}
    #toppage .news_list ul { display: none;}
    #toppage .news_list ul:nth-child(1),
    #toppage .news_list ul:nth-child(2) { display:block}    
    #toppage .news_list ul+ul { margin-top: 70px;}
    #toppage .news_list ul li+li { margin-left: 15px;}
    #toppage .news_list ul li:nth-child(3) { clear: both; float: none; width:100%; margin: 0; padding-top: 20px;}
    #toppage .news_list ul.kotei { margin-top: 70px;}
}


/*** SERVICE1 ***************************************************************/
#toppage .service1 { overflow: hidden;}
#toppage .service1 a { display: block; padding-top: 70px; height: 700px; color: #222; text-decoration: none; transition:1s;}
#toppage .service1 p { position: relative; float: left; width: 33.3%; height: 700px;}
#toppage .service1 p:nth-child(1) a { 
    background: url("../../image/top/service1-1.jpg") no-repeat center center;
    background-size:auto 100%;
}
#toppage .service1 p:nth-child(2) a { 
    background: url("../../image/top/service1-2.jpg") no-repeat center center;
    background-size:auto 100%;
}
#toppage .service1 p:nth-child(3) a { 
    background: url("../../image/top/service1-3.jpg") no-repeat center center;
    background-size:auto 100%;
}
#toppage .service1 p::after {
    display:block; clear: both; content:"";
    position: absolute; top:0; left:0; right: 0; margin: auto;
    width:7px; height: 65px;
    background: url("../image/arrow_wb.png") no-repeat top center;
    background-size:100% auto;
}
#toppage .service1 b {
	position: relative;
	display: block;
	margin: auto;
	padding:0; 
	width: 75px;
	z-index:999;
    background: #fff;
}
#toppage .service1 b span {
    position: relative;
	display: block;
	margin: auto;
    padding:0;
    width:75px;
    height: 368px;
    text-align: center;
    box-sizing: border-box;
}
#toppage .service1 b span img { position: absolute; top:0; left: 0; right: 0; bottom:0; margin: auto; width: 28px; height: auto;}
#toppage .service1 b::before,
#toppage .service1 b::after {
    display: block; clear: both; content:"";
    position: absolute; left: -4px; width:calc(100% + 8px); height: 6px;
}
#toppage .service1 b::before {
    top: -3px;
    background:
        url("../image/hishigata.png") no-repeat left top,
        url("../image/hishigata.png") no-repeat right top;
    background-size: 6px auto;
}
#toppage .service1 b::after {
    bottom: -3px;
    background:
        url("../image/hishigata.png") no-repeat left bottom,
        url("../image/hishigata.png") no-repeat right bottom;
    background-size: 6px auto;
}
#toppage .service1 p span.come {
    position: absolute; bottom:0;
    display: block;
    padding-bottom: 45px;
    width: 100%;
    color: #fff; 
    text-align: center;
    color: #fff;
    background: linear-gradient(rgb(0,0,07,0), rgb(0, 0,0,0.85));
}
@media only screen and (min-width:960px){
    #toppage .service1 p a:hover { background-size: auto 120%;}
}
@media only screen and (max-width:960px){
    #toppage .service1 { padding: 200px 40px 175px;}
    #toppage .service1 a { display: block; padding-top:0; color: #222; text-decoration: none;}
    #toppage .service1 p {  float:none; width:100%; height: auto;}
    #toppage .service1 p+p { margin-top: 100px;}
    #toppage .service1 p a { height: auto; background: none !important; }
    #toppage .service1 p img  { width: 100%; height: auto;}
    #toppage .service1 p::after { display: none;}
    #toppage .service1 b { 
		position: absolute; left: 20px; top: -50px;
		padding:0; margin: auto; width:46px;
        border: 1px solid rgba(0,0,0,0.30);
        background:rgba(255,255,255,0.85);
        box-shadow: 4px  4px 0 0 rgba(0,0,0,0.15);
		box-sizing: border-box;
	}
	#toppage .service1 b span {width:46px;}
	#toppage .service1 b span img { width: 16px; height: auto;}
    #toppage .service1 p:nth-child(1) b span { height: 100px !important;}
    #toppage .service1 p:nth-child(2) b span { height: 211px !important;}
    #toppage .service1 p:nth-child(3) b span { height: 169px !important;}
    #toppage .service1 b::before,
    #toppage .service1 b::after { display: none; }    
    #toppage .service1 p span.come {
        position:static;
        display: block;
        padding: 25px 15px;
        width: 100%;
        color: #000; 
        text-align: left;
        background:url("../image/arrow_gr.png") no-repeat right center;
        box-sizing: border-box;
    }
}


/*** SERVICE2 ***************************************************************/
#toppage .service2 { position: relative; padding:160px 0 100px; margin: auto; max-width: 1100px; overflow: hidden;}
#toppage .service2 h3 {  position: relative; z-index: 999; margin: auto; width: 215px;}
#toppage .service2 h3 p { 
    padding: 55px 0;
    width: 215px;
    text-align: center;
    border: 1px solid #000;
    box-sizing: border-box;
    background: #fff;
}
#toppage .service2 h3 span {
    position: relative;
    margin: auto;
    writing-mode: vertical-rl;
    display: inline-block;
    font-weight: normal;
    font-size:28px;
    line-height:60px;
    letter-spacing:8px;
    vertical-align: middle;
}
#toppage .service2 h3 p::before,
#toppage .service2 h3 p::after {
    display: block; clear: both; content:"";
    position: absolute; left: -4px; width:calc(100% + 8px); height: 6px;;
}
#toppage .service2 h3 p::before {
    top: -3px;
    background:
        url("../image/hishigata.png") no-repeat left top,
        url("../image/hishigata.png") no-repeat right top;
    background-size: 6px auto;
}
#toppage .service2 h3 p::after {
    bottom: -3px;
    background:
        url("../image/hishigata.png") no-repeat left bottom,
        url("../image/hishigata.png") no-repeat right bottom;
    background-size: 6px auto;
}
#toppage .service2 .naiyou1,
#toppage .service2 .naiyou2 { position: relative; width: 48%; z-index: 999;}
#toppage .service2 .naiyou1 { float:right;}
#toppage .service2 .naiyou2 { float: left;}
#toppage .service2 .photo1  { position: relative; top: -100px;}
#toppage .service2 .photo2 { margin-bottom: 70px;}
#toppage .service2 .photo1 img,
#toppage .service2 .photo2 img { width:100%;}
@media only screen and (max-width:960px){
    #toppage .service2 { padding:0;}
    #toppage .service2 h3 {  margin:0; width:auto;}
    #toppage .service2 h3 p,
    #toppage .service2 h3 span {
        display:block;
        writing-mode:horizontal-tb;
        margin: auto;
        padding:0;
        width:auto;
        border: none;
        text-align: left;
        background:none;
    }
    #toppage .service2 h3 p::before,
    #toppage .service2 h3 p::after { display: none; }    
    #toppage .service2 .naiyou1,
    #toppage .service2 .naiyou2 { float: none; width: 100%;}
    #toppage .service2 .photo1  { top:0;}
    #toppage .service2 .photo1 img { width:100%; height: 400px; object-fit: cover;}
}


/*** ACCESSMAP **********************************************************/
#toppage .accessmap { clear: both; }
#toppage .accessmap .cont { display: none;}