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

/* Basic
--------------------------------------------*/
.outline {
    padding: 0;
}
#contents.outline,
#contents .outline{
    padding: 2rem 1rem;
}

/* header
--------------------------------------------*/
header{
    padding: 0;
    position: relative;
    height: 65px;
    z-index: 999;
}
header > div {
    display: block;
}
header #logo {
/*    width: 50%;*/
    height: 65px;
    padding: 1rem 0 0 1rem;
}
header #logo img {
    max-width: 250px;
}

header .outline{
    padding: 0;
}
.h_right{
    display: none;
    justify-content: center;
    background: #fff;
    padding: 1rem;
}
.h_right nav{
	display: block;
    justify-content: flex-start;
}

.h_right nav ul,
.h_right .lang {
    justify-content: center;
    margin: 0 0 1rem;
}

.h_right nav ul{
    display: block;
    justify-content: flex-end;
    margin: 0 2rem 0 0;
    font-size: 0.95rem;
}
.h_right nav ul {
    margin: 0 0 2rem;
}
.h_right nav ul li a,
.h_right nav ul li em{
    border-bottom: solid 1px var(--gray-color2);
    padding: 1rem 0;
}
.h_right nav ul li a:after,
.h_right nav ul li em:after {
    display: none;
}

.h_right .lang{
    justify-content: center;
}

/*----humberger menu----*/

.sp_btn{
    display: block;
	position: absolute;
	top: 0;
	right: 0;
    font-size: 0.8rem;
	z-index: 5;
}

.sp_btn{
    background:var(--accent-color);
    color: #fff;
	text-align: center;
	padding: 0.8rem 0;
    width: 65px;
	height: 65px;
	text-decoration: none;
}

.sp_btn span{
	margin: 10px auto 15px;
}

.sp_btn span::before,
.sp_btn span::after {
	content: "";
}

.sp_btn span,
.sp_btn span::before,
.sp_btn span::after{
	display: block;
	background-color: #fff;
	width: 22px;
	height: 1px;
}

.sp_btn span::before { animation: sp_btn-before .75s forwards;}

@keyframes sp_btn-before {
	0% {
		transform: translateY(0) rotate(45deg);
	}
	100% {
		transform: translateY(10px) rotate(0);
	}
}

.sp_btn span { transition: all .25s .25s;}

.sp_btn span::after { animation: sp_btn-after .75s forwards;}
@keyframes sp_btn-after {
0% {
	transform: translateY(0) rotate(-45deg);
}
100% {
	transform: translateY(-10px) rotate(0);
}
}

.sp_btn.close span::before { animation: close-sp_btn-before .75s forwards;}
@keyframes close-sp_btn-before {
	0% {
		transform: translateY(10px) rotate(0);
	}
	100% {
		transform: translateY(0) rotate(45deg);
	}
}

.sp_btn.close span { background-color: transparent;}

.sp_btn.close span::after { animation: close-sp_btn-after .75s forwards;}
@keyframes close-sp_btn-after {
	0% {
		transform: translateY(-10px) rotate(0);
	}
	100% {
		transform: translateY(0px) rotate(-45deg);
}
}

/*---- overlay ----*/
.overlay {
    position: absolute;
    z-index: 100;	
    background: rgba(0,0,0,0.8);
    width: 100%;
    height: 100%;
    display: none;
}

/* footer
--------------------------------------------*/

footer {
    padding: 1rem; 
}

footer dl{
    display: block;
}


/* s_main
--------------------------------------------*/
.s_main{
    padding: 5rem 1rem;
    word-break: break-all;
}


/*　文書構造:
------------------------------------------------*/

/*-- タイトル --*/

h2{
    font-size: 1.6rem;
    margin: 3rem 0 1rem;
    padding: 1rem 0;
    word-break: break-all;
}

h3{
    font-size: 1.2rem;
}



/*-- リスト --*/

ul.list2 {
    grid-template-columns: 1fr;
}

/* top
--------------------------------------------*/

/*-- about --*/

#about{
    grid-template-columns: 1fr;
    background: url("../img/about_img.jpg") no-repeat;
    background-position:  30% 0%;
    background-size: 160%;
}
#about h2{
    padding: 7rem 1rem;
}

/*-- banner --*/

.banner{
    grid-template-columns: 1fr;
	grid-gap: 1rem;
}

/* support
--------------------------------------------*/
.support_box{
    grid-template-columns: repeat(2,1fr);
    grid-gap: 1rem;
}

@media screen and (max-width: 600px){
.support_box{
    grid-template-columns: 1fr;
}
}


/* movie
--------------------------------------------*/
.movie iframe {
    width: 100%;
}




.sp_scroll {
    clear: both;
    overflow: auto!important;
    -webkit-overflow-scrolling: touch;
    border: 20px solid #E7E7F7;
    background: #E7E7F7;
    margin: 1rem 0;
}

.sp_scroll .scroll_txt {
    display: block;
    background: url("../img/icon_scroll.svg") no-repeat left 50%;
    background-size: 30px;
    padding: 10px 0 10px 35px;
}

.sp_scroll::-webkit-scrollbar{
 height: 5px!important;
}
.sp_scroll::-webkit-scrollbar-track{
 background: #ccc!important;
}
.sp_scroll::-webkit-scrollbar-thumb {
 background: var(--accent-color)!important;
}
.sp_scroll table{width: 700px;}
.sp_scroll table.table_indicator {width: 800px;}

.sp_scroll table td{background: #fff;}