@charset "UTF-8";
/* ------------------------------------------------ */
/* ▼bootstrap用 */
/* ------------------------------------------------ */
.selector-for-some-widget {
  -webkit-box-sizing: content-box;
  box-sizing: content-box; }

/* ------------------------------------------------ */
html{
	scrollbar-gutter: stable;
	overflow-x: hidden;}
body {
background: url("../images/bg_03.webp");
background-size: cover;
background-attachment: fixed;
font-family: "Zen Maru Gothic", serif;
font-weight: 400;
font-style: normal;
width: 100vw;
overflow-x: hidden;
overflow-y: scroll;}

hr{
	color: #23ccd5}

.sawarabi{
	font-family: "Sawarabi Gothic", sans-serif;
}

h2{
	font-weight: bold;
	margin-bottom: 30px;
	padding: 30px 10px;
	color: #fff;
	background: #23ccd5;
	font-size: 24px;
	text-align: center;}

h2.line{
	margin: 30px auto;
	padding: 10px;
	color: #23ccd5;
	background: none;
	border-bottom: 3px solid #23ccd5;
	max-width: 500px;
}


h3{
	text-align: center;}
h4{
	font-size: 20px;
	margin: 15px auto;
}

@keyframes fadein {
            0% {
                opacity: 0;}
            100% {
                opacity: 100;}
}
@keyframes fadeout {
            0% {
                opacity: 100;}
            100% {
                opacity: 0;}
}

#load{
	width: 100vw;
	height: 100vh;
	background: #fff;
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	transition: 2s ease-out;
	/*animation-name: fadeout;
	animation-delay: 2s;
	animation-duration: 5s;
	animation-direction: ease-out;*/}
#load div{
	position: absolute;
	text-align: center;
	top: calc(50vh - 1em);
	width: 100vw;}
.hide{
	opacity: 0;
	display: none;}

#logo{
	width: 100vw;
	padding: 0;
	position: fixed;
	top: 0;
	right: 8px;
	text-align: right;}
#logo a{
	display: inline-block;}
#logo a img{
	width: 100px;
	height: 100px;
}
.min_supoort{
	display: none;}
h3.min_title{
	font-size: 16px;}


.row{
	align-items: center;
	justify-content: center;}
.btn-primary{
	background: #288cff;
	border: 1px solid #288cff;}


#firstview{
background: url("../images/bg01.webp");
background-size: cover;
background-attachment: scroll;
background-position: bottom;
text-align: center;
}
#firstview img{
max-height: 40vh;
margin-top: 5vh;
animation-name: fadein;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
}

#sub01_title{
	text-align: center;
	background: url("../images/title_sub01_bg.webp");
	background-size: cover;
	background-position: right;
	height: 50vh;
	align-content: center;}
#sub01_title{
	align-content: flex-start;
	padding-top: calc(25vh - 1em);}
#sub01_title h3{
	color: #fff;
	font-size: 24px;
	padding: 10px;}
#sub01_text{
	color: #1b1464;
	background: #fff;
}
#sub01_text p{
	padding: 10%}
#sub01_text p a{
	font-size: 85%;}

.sp_title{
	background: #fff;
	border-radius: 15px;
	align-self: stretch;}
.sp_title h3{
	color: #23ccd5;
	font-size: 20px;}
.sp_title h3 i{
	font-size: 40px;
	padding-bottom: 10px;}
.sp_title p{
	color: #002b8a;
	text-align: center;}
.sp_title h3::after{
	content: url('../images/hr.svg');
	display: block;
	}

#activity{
background: url("../images/bg_02.webp");
background-size: cover;
background-attachment: fixed;
}

#sp_store, #sdgs{
	background: rgba(255,255,255,0.8);
	border-radius: 20px;
}

.read{
	color: #002b8a;
	text-align: center;
	font-size: 130%;
	font-weight: bold;}

#menu_thumb{
    position: relative;}

#menu_thumb span{
	position: absolute;
    top: 5px;
    right: 10px;
    font-size: 1.5em;
	color: #1b1464;
	text-shadow: -3px 3px 0px #fff;
	z-index: 2;}

#menu_thumb button {
    display: block;
	position: relative;
	top: 0;
	left: 0;
	z-index: 1;
	transition: all .3s;
	border: none;
    background: none;
}
#menu_thumb button:hover{
	top: -5px;}
#menu_thumb button img{
	border: 8px solid #fff;}
#menu_thumb button:hover img{
	opacity: 0.8}

#tawanlogo {
	text-align: center}
#tawanlogo img{
	max-width: 500px;}
#tawanlogo h3 img{
	max-width: 400px;}
#tawanlogo span{
	display: block;
	font-weight: bold;
	color: #002b8a;
	padding: 5px 0 30px 0;}

.store_info{
    background: #fff;
	align-self: stretch;}
.store_info:nth-of-type(1){
	border: 1px solid yellow;
	background: linear-gradient(-45deg, white 96%, yellow 0);}
.store_info:nth-of-type(2){
	border: 1px solid navy;
	background: linear-gradient(-45deg, white 96%, navy 0);}
.store_info:nth-of-type(3){
	border: 1px solid red;
	background: linear-gradient(-45deg, white 96%, red 0);}

.sdgs_marker{
	font-weight: bold;
	display: inline-block;}
.sdgs_marker:nth-of-type(1){
	background: rgba(229, 2, 30, .4);}
.sdgs_marker:nth-of-type(2){
	background: rgba(225, 166, 0, .4);}
.sdgs_marker:nth-of-type(3){
	background: rgba(28, 151, 58, .4);}
.sdgs_marker:nth-of-type(4){
	background: rgba(200, 0, 122, .4);}
.sdgs_marker:nth-of-type(5){
	background: rgba(245, 162, 12, .4);}


@media (max-width: 767px) {
	#logo {
	text-align: left;
	}
	#logo a img{
	width: 90px;
	height: 90px;
	}
	.min_supoort{
		display: block;}
	.md-support{
		display: none;}
}