@charset 'utf-8';

html { scroll-behavior: smooth; }

/*共通css*/
body {letter-spacing: 0.1em; font:normal normal normal 14px/2em YuGothic, 'Yu Gothic', 'Avenir', 'Noto Sans JP', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'ＭＳ ゴシック', 'ＭＳ Ｐゴシック', 'MS PGothic', Times, sans-serif;box-sizing: border-box; }

.inline_pc { display:inline; }
.inline_sp { display:none; }
.block_pc { display:block; }
.block_sp { display:none; }

.orange { background:#F65E39; }
.blue { background:#1BA5D6; }
.navy { background:#0A3F67; }
.darkyellow { background:#FED631;}
.yellow { background:#FFFF00;}
.brown { background:#766654;}
.gray { background:#F2F1ED;}

span { line-height: 1.7em; display:inline-block; }
small { line-height: 1.7em; display:inline-block; }
.marginbottom0 { margin-bottom:0px; }
.margintop0 { margin-top:0; }
.marginleft0 { margin-left:0; }
.paddingbottom0 { padding-bottom:0; }
.margintop50 { margin-top:50px; }


.namibox {margin: -60px 0 -11vw 0;
padding: 8vw 0 23vw;
background-image: url(../img/bg_spot.png);
background-repeat: no-repeat;
background-position: -20px 0;
background-size: 90%;}

/* 0925なみ背景 */
.wrap_grey {
width: 100%;
background: url(../img/bg_grey.png) repeat-x;
background-size: 400px;
}

.wrap_grey.yellow {
	width: 100%;
	background: url(../img/bg_grey_yellow.png) repeat-x;
	background-size: 400px;
	}

.wrap_grey2 {
width: 100%;
background: url(../img/bg_grey2.png) repeat-x;
background-size: 400px;height: 2vw;
}

.wrap_grey2.yellow {
	width: 100%;
	background: url(../img/bg_grey2_yellow.png) repeat-x;
	background-size: 400px;height: 2vw;
	}

.wrap_yellow {
width: 100%;
background: url(../img/bg_yellow.png) repeat-x;
background-size: 400px;height: 10vw;
}

@media screen and (max-width: 740px) {
  .wrap_grey,.wrap_grey2,.wrap_yellow{background-size: 120px;}
}





@media screen and (max-width: 740px) {
    .inline_pc { display:none; }
    .inline_sp { display:inline; }
    .block_pc { display:none; }
    .block_sp { display:block; }
    .wrap_grey2 {
        width: 100%;
        background: url(../img/bg_grey2.png) repeat-x;
        background-size: 200px;
        height: 10vw;
    }
}

/* .wrap { width:100%; background:url(../img/bg_.png) repeat-x; background-size:400px; } */
.wrap { width:100%; background-size:400px; }


@media screen and (max-width: 740px) {
    .wrap { background-size:155px; }
}

.title { width:100%; display:block; padding:20px 0 30px 0; }
.title_img { width:auto; height:60px; display:block; margin:0 auto; }
.title_img.block_pc  { display:none;}
.title_h1 { width:100%; display:block; margin:15px 0 0 0; text-align:center; font-weight:bold; font-size:16px; line-height:1.2; }
.title_h2 { width:100%; display:block; margin:15px 0 0 0; text-align:center; font-weight:bold; font-size:16px; line-height:1.2; }
@media screen and (max-width: 740px) {
    .title { width:100%; display:block; padding:10px 0 20px 0; }
    .title_img { height:35px; }
    .title_h1 { font-size:14px; }
    .title_h2 { font-size:14px; }
}

.contents { width:1080px; margin:0 auto; }
@media screen and (max-width: 1120px) {
    .contents { width:90%; }
}



.contentsMore { width:190px; height:40px; display:block; margin:10px auto 0 auto; padding:0 40px 0 0; text-align:center; background:#fff; border:2px solid #0A3F67; border-radius:5px; position:relative; box-sizing:border-box; color:#0A3F67; font-weight:bold; line-height:37px; transition:0.3s; }
a:hover .contentsMore { background:#FED631; transition:0.3s; }
.contentsMore::before { content: ""; display: block; position: absolute; top: 0; bottom: 0; right: 30px; margin: auto; width: 20px; height: 2px; background: #0A3F67; transition: .3s; }
.contentsMore::after{ content: ""; display: block; position: absolute; top: 0; bottom: 0; right: 30px; margin: auto; width: 8px; height: 8px; border-left: 2px solid #0A3F67; border-bottom: 2px solid #0A3F67; transform: rotate(-135deg); transition: .3s; }
@media screen and (max-width: 740px) {
	.contentsBox { flex-direction:column; }
	.contentsBox a { width:100%; height:100px; margin:0 0 10px 0; padding:0; display:flex; flex-direction:row-reverse; justify-content:left; align-items:center; position:relative; }
	.contentsBox a img { margin:15px 30px; }
	.contentsMore { width:auto; margin:-20px 0 0 0; padding:0; background:none; border:none; position:absolute; top:50%; right:0; }
	.contentsMore::before { background: #fff; }
	.contentsMore::after{ border-left: 2px solid #fff; border-bottom: 2px solid #fff; }
}


/*==================================================
ふわっ
===================================*/
@media screen and (min-width: 740px) {
.op0 { opacity: 0;}
.fadeUp {
	animation-name: fadeUpAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
	opacity: 0;
}

@keyframes fadeUpAnime {
	from {
		opacity: 0;
		transform: translateY(100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.popUp {
	animation-name: popUpAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
	opacity: 0;
}

@keyframes popUpAnime {
	from {
		opacity: 0;
		transform: scale(0);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}
/* アニメーションスタートの遅延時間を決めるCSS*/
.delay-time02 {	animation-delay: 0.2s;}
.delay-time04 {	animation-delay: 0.4s;}
.delay-time06 {	animation-delay: 0.6s;}
}

/* もっと見る */
.linkMore { width:190px; height:40px; display:block; margin:10px auto 0 auto; padding:0 40px 0 0; text-align:center; background:#fff; border:2px solid #0A3F67; border-radius:5px; position:relative; box-sizing:border-box; color:#0A3F67; font-size:14px;font-weight:bold; line-height:37px;transition:0.3s; }

a:hover .linkMore { background:#FED631; transition:0.3s; }
.linkMore::before { content: ""; display: block; position: absolute; top: 0; bottom: 0; right: 30px; margin: auto; width: 20px; height: 2px; background: #0A3F67; transition: .3s; }
.linkMore::after{ content: ""; display: block; position: absolute; top: 0; bottom: 0; right: 30px; margin: auto; width: 8px; height: 8px; border-left: 2px solid #0A3F67; border-bottom: 2px solid #0A3F67; transform: rotate(-135deg); transition:.3s; }

@media screen and (max-width: 740px) {
.linkMore { margin:10px auto 20px auto; }
.linkMore { margin:10px auto 20px auto; }
}


/* 221008_top.cssからコピー */

/*==================================================
ふわっ
===================================*/
@media screen and (min-width: 740px) {
.op0 { opacity: 0;}
.fadeUp {
	animation-name: fadeUpAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
	opacity: 0;
}

@keyframes fadeUpAnime {
	from {
		opacity: 0;
		transform: translateY(100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.popUp {
	animation-name: popUpAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
	opacity: 0;
}

@keyframes popUpAnime {
	from {
		opacity: 0;
		transform: scale(0);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}
/* アニメーションスタートの遅延時間を決めるCSS*/
.delay-time02 {	animation-delay: 0.2s;}
.delay-time04 {	animation-delay: 0.4s;}
.delay-time06 {	animation-delay: 0.6s;}
}

.title p span.greeting { line-height:1.7em; color:#ff0000; font-size:14px; margin-top:20px; display:inline-block}
@media screen and (max-width: 740px) {
	.title p span.greeting { text-align: justify; }
}