@charset "UTF-8";

/*----------------------------------------
 * フォント
 *----------------------------------------*/
 
/*
@font-face {
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 100;
	font-display: swap;
	src: url(../webfonts/NotoSansJP-Thin.otf) format('opentype');
}

@font-face {
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url(../webfonts/NotoSansJP-Light.otf) format('opentype');
}
*/

@font-face {
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../webfonts/NotoSansJP-Regular.otf) format('opentype');
}


@font-face {
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(../webfonts/NotoSansJP-Medium.otf) format('opentype');
}

@font-face {
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(../webfonts/NotoSansJP-Bold.otf) format('opentype');
}

/*
@font-face {
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url(../webfonts/NotoSansJP-Black.otf) format('opentype');
}
*/



/*
@font-face {
	font-family: 'Noto Serif JP';
	font-style: normal;
	font-weight: 100;
	font-display: swap;
	src: url(../webfonts/NotoSerifJP-Thin.otf) format('opentype');
}

@font-face {
	font-family: 'Noto Serif JP';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url(../webfonts/NotoSerifJP-Light.otf) format('opentype');
}
*/

@font-face {
	font-family: 'Noto Serif JP';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../webfonts/NotoSerifJP-Regular.otf) format('opentype');
}

/*
@font-face {
	font-family: 'Noto Serif JP';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(../webfonts/NotoSerifJP-Medium.otf) format('opentype');
}
*/

@font-face {
	font-family: 'Noto Serif JP';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(../webfonts/NotoSerifJP-Bold.otf) format('opentype');
}

/*
@font-face {
	font-family: 'Noto Serif JP';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url(../webfonts/NotoSerifJP-Black.otf) format('opentype');
}

/*----------------------------------------
 * 基本設定
 *----------------------------------------*/

body {
    font-family:"Noto Sans JP", "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    margin:0;
	padding:0;
	font-size:1rem;
	color:black;
	line-height:1.75em;
	background:url(../images/top_border.png) repeat-x center top;
	padding-top:8px;
}

p {
	margin:0;
}

.std_width {
	width:1200px;
	margin:0 auto;
}

.contents_width {
	width:880px;
	margin:0 auto;
}

a {
	color:#3fa9f5;
}

a:visited {
	color:#3fa9f5;
}

.bt_form {
	text-align:center;
}

.bt_form a {
	display:inline-block;
	padding:0.3em 2em;
	background-color:#86b206;
	border-radius:10px;
	color:white;
}

/* オンラインショップボタン */
.toshop {
	position:fixed;
	width:80px;
	right:20px;
	top:-200px;
	z-index:1000;
}

.toshop .std_width {
	position:relative;
}

.toshop a {
	position:absolute;
	display:block;
}
.toshop img {
}

/* 規約の開閉ボタン */
.toggle_box{
	display:none;
/*
	background-color:#eaf8ff;
*/
	background-color:#ededed;
	
	padding:20px;
	margin-top:20px;
}
.btn{
	background:url(../images/toggle.png) no-repeat left top;
	width:42px;
	height:32px;
	display:block;
	float:right;
}
.btn.active{
	background-position:left bottom;
}
.btn:hover{
	cursor:pointer;
}

article {

}

.ab_image {
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left top;
    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.col_red { color:#e60020}
.col_green { color:#417935;}
.col_blue { color:#004c87;}

/*----------------------------------------
 * メインイメージ
 *----------------------------------------*/

.main {
	position:relative;
	overflow:hidden;
}

.main .std_width {
	position:relative;
}

.main .main_ja_logo {
	position:absolute;
	left:0;
	top:0;
	z-index:20;
	width:380px;
	height:80px;
}

.main .main_tiikikouken {
	position:absolute;
	right:0;
	top:0;
	z-index:20;
	width:260px;
	height:58px;
}

.main {
	background:url(../images/main_bg.png) repeat-x left top;
}

.main .flex2 {
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.main .flex2 .left,
.main .flex2 .right {
	width:49%;
}

.main .sec_main_1 {
	position:relative;
}

.main .sec_main_1 .main_bg2 {
	position:absolute;
}
.main .sec_main_1 .main_bg2 {
	width:100vw;
	height:auto;
	bottom:-176px;
	left:50%;
	margin-left:-50vw;
	z-index:0;
}

.main .sec_main_1 .inner {
	position:relative;
	padding-left:25px;
	padding-right:25px;
	z-index:1;
}

.main .flex2 .right {
	background:url(../images/main_mainphoto.jpg) no-repeat center center;
	background-size:cover;
	position:relative;
	z-index:1;
	box-shadow: 3px 3px 12px 0px rgba(0, 0, 0, 0.3);
}
.main .title_1 {
	background:url(../images/title_1.png) no-repeat center center;
	background-size:cover;
	margin:0;
	width:100%;
/*
	margin-top:85px;
*/
	margin-top:30px;
	aspect-ratio:1100/264;
	text-indent:110%;
	white-space: nowrap;
	overflow:hidden;
}

.main h1 {
/*
	background:url(../images/title_main.png); no-repeat center center;
	aspect-ratio:1100/450;
*/
	background:url(../images/title_main_2.png); no-repeat center center;
	background-size:cover;
	aspect-ratio:1100/196;
	margin:0;
	margin-top:20px;
	margin-bottom:60px;
	width:100%;
	height:auto;
	text-indent:110%;
	white-space: nowrap;
	overflow:hidden;
}

.main .lead {
    font-family:"Noto Serif JP",'游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;;
	font-size:1.6875rem;
	line-height:1.8em;
	margin-top:100px;
}

.main .flex3 {
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.main .flex3 img {
	display:block;
	width:31%;
	box-shadow: 3px 3px 12px 0px rgba(0, 0, 0, 0.3);
}

.main .during {
	width:100%;
	box-sizing:border-box;
	background-color:#ffdf52;
	padding:15px;
	font-weight:500;
	box-shadow: 3px 3px 12px 0px rgba(0, 0, 0, 0.3);
}

.main .during span {
	font-size:1.375rem;
}

.main .dur_date {
	font-size:1.75em;
}

.main .dur_date span {
	font-size:2.5rem;
}

.main .main_2 .left {
	position:relative;
	z-index:0;
}

.main .main_2 .left img {
	width:515px;
	height:auto;
	margin-left:-20px;
}

.main .main_2 .right {
	position:relative;
	z-index:1;
	font-size:1.125rem;
	line-height:2em;
	text-align:justify;
}

.main .main_2 .right h2 {
    font-family:"Noto Serif JP",'游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;;
	font-size:2rem;
	line-height:1.8em;
	font-weight:500;

}

.sec_1 {
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(224, 244, 255, 1));
}

/* 部門 */
.bumon {
	border:6px solid white;
	border-radius:
	position:relative;
	border-radius:20px;
}

.bumon .inner {
	padding:0 20px 20px 20px;
}

.bumon h2 {
	width:100%;
	margin-top:-1.2em;
	text-align:center;
}

.bumon h2 span {
	display:inline-block;
	line-height:2em;
	padding:0 1.5em;
	background-color:white;
	border-radius:15px;
	color:white;
}

.bumon dl dt {
	font-size:1.125rem;
	font-weight:500;
	line-height:1em;
	float:left;
	width:5em;
	text-align:center;
	border-radius:15px;
	background-color:white;
	color:white;
	padding:0.5em;
}

.bumon dl dd {
	margin-left:8em;
}

.bumon dl.present dt {
	float:none;
	margin-left:auto;
	margin-right:auto;
}

.bumon dl.present dd {
	margin-left:0;
}

.bumon .flex3 {
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.bumon .flex3 .column {
	width:32%;
}

.bumon .flex3 .column .step {
	text-align:center;
	margin-bottom:15px;
}

.bumon .flex3 .column .step strong {
	display:inline-block;
	background-color:black;
	color:white;
	font-size:1.125rem;
	padding:0.2em 0.5em;
}


.bumon.ippan {
	border-color:#e60020;
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 248, 235, 1));
}

.bumon.ippan .col2_70_30 .left { width:70%;}
.bumon.ippan .col2_70_30 .right { width:30%;}

.bumon.ippan h2 span{
	background-color:#e60020;
}

.bumon.ippan dl dt {
	background-color:#e60020;
}

.bumon.ippan dl dd .quiz {
}

.bumon.ippan dl dd .quiz strong {
	display:inline-block;
	font-size:1.75rem;
	font-weight:700;
	border-bottom:3px solid black;
	padding-bottom:0.3em;
}

.bumon.ippan dl dd .quiz div {
	font-size:1.5rem;
	color:#e60020;
	font-weight:500;
	padding-left:2em;
}

.bumon.yakusyokuin {
	border-color:#417935;
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(239, 255, 222, 1));
}

.bumon.yakusyokuin .col2_70_30 .left { width:70%;}
.bumon.yakusyokuin .col2_70_30 .right { width:30%;}

.bumon.yakusyokuin h2 span{
	background-color:#417935;
}

.bumon.yakusyokuin dl dt {
	background-color:#417935;
}


.sec_insta {
	background-image: linear-gradient(180deg, rgba(224, 244, 255, 1), rgba(150, 212, 255, 1));
}

.sec_insta h2 {
	font-size:2em;
}

.sec_insta a,.sec_insta a:visited {
	color:black;
	transition:color 0.2s;
}

.sec_insta a:hover {
	color:#0090ff;
}

.sec_insta a.icon img {
	transition:transform 0.2s;
}

.sec_insta a.icon:hover img {
	transform:scale(1.2);
}

.sec_insta ul#kyoudou_insta {
	display:flex;
	/*
	justify-content: space-between;
	*/
	flex-wrap: wrap;
	margin:0;
	padding:0;
}

.sec_insta ul#kyoudou_insta li.loading {
	width:100%;
	padding:5em;
	border:4px dotted #004c87;
	color:white;
	text-align:center;
}

.sec_insta ul#kyoudou_insta li {
	display:block;
	width:23%;
	margin-bottom:20px;
	margin-right:2.5%;
}

.sec_insta ul#kyoudou_insta li:nth-child(4n) {
	margin-right:0;
}

.sec_insta ul#kyoudou_insta li a {
	border-style:inset;
	border:5px solid white;
	box-shadow: 0px 0px 15px -5px #777777;
	display:block;
	width:100%;
	padding-top:100%;
}

.sec_insta ul#kyoudou_insta li a {
	background-position:center center;
	background-size:cover;
}

.sec_insta ul#kyoudou_insta li:nth-child(9) { display:none;}

.sec_2 {
	text-align:justify;
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(244, 244, 244, 1));
}

.sec_2 .tokusyuu {
	text-align:center;
}

.sec_2 .tokusyuu span {
	display:inline-block;
	background-color:black;
	color:white;
	line-height:1em;
	padding:0.5em 1em;
}

.sec_2 h2 {
    font-family:"Noto Serif JP",'游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;;
	font-size:2.625rem;
	font-weight:500;
	text-align:center;
}

.sec_2 h3 {
	margin:0 0 6px 0;
}

.sec_2 .kakomi.manabou {
	position:relative;
	background-color:#d9e4ed;
	border-radius:20px;
	padding:1.5em 2em 1em 2em;
	font-size:1.125rem;
	line-height:1.8em;
	font-weight:500;
}

.sec_2 .kakomi.manabou:after { content:'';display:block;clear:both;}

.sec_2 .kakomi.manabou h4 {
	float:left;
	width:126px;
	margin:-63px 20px 0 0;
}

.sec_2 h5 {
	font-size:1.25rem;
	margin:0 0 10px 0;
}

.sec_2 .kakomi.jissen {
	position:relative;
	background-color:#e3ebe1;
	border-radius:20px;
	padding:1.5em 2em 1em 2em;
	font-size:1.125rem;
	line-height:1.8em;
	font-weight:500;
}

.sec_2 .kakomi.jissen:after { content:'';display:block;clear:both;}

.sec_2 .kakomi.jissen h4 {
	float:left;
	width:187px;
	margin:-63px 20px 0 0;
}

.sec_2 .sdgs {
	text-align:left;
	margin-bottom:10px;
}

.sec_2 .sdgs img {
	width:60px;
	height:60px;
}

.sec_2 .flex4 {
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.sec_2 .flex4 .column {
	width:23%;
}



/*----------------------------------------
 * 共通
 *----------------------------------------*/
.std_column2.col2bg{}

.std_column2.col2bg .left { background:url(../images/bg_green.png);}
.std_column2.col2bg .right{ background:url(../images/bg_red.png);}
.std_column2.col2bg .left, .std_column2.col2bg .right{
	position:relative;
}

.std_column2.col2bg h2 { margin:0;}

.std_column2.col2bg img { display:block;}

.std_column2.col2bg2{}

.std_column2.col2bg2 .left { background:url(../images/bg_green.png);}
.std_column2.col2bg2 .right{ background:url(../images/bg_white.png);}
.std_column2.col2bg2 .left, .std_column2.col2bg2 .right{
	position:relative;
}

.std_column2.col2bg3{}

.std_column2.col2bg3 .left { background:url(../images/bg_white.png);}
.std_column2.col2bg3 .right{ background:url(../images/bg_red.png);}
.std_column2.col2bg3 .left, .std_column2.col2bg3 .right{
	position:relative;
}


/*----------------------------------------
 * 応募要項、規約
 *----------------------------------------*/
.campaign_detail {
/*
	background:url(../images/std_wood_bg.jpg) repeat center top;
	background-size:contain
*/
}

.campaign_detail .std_width {
	background-color:white;
	border:20px;
}

.campaign_detail .contents_width {
	padding:1em 0;
}

.campaign_detail h2 {
/*
	color:#86b206;
*/
	color:black;
	text-align:center;
	line-height:2em;
}

.campaign_detail h3 {
	color:#e60020;
	margin-top:2em;
	margin-bottom:0.5em;
}

.jimukyoku:after {
	content:' hareoka_kouhou@hr.oy-ja.or.jp';
}


/*
.campaign_detail .step p {
	text-indent:-4.5em;
	margin-left:4.5em;
}
*/

/*----------------------------------------
 * フッター
 *----------------------------------------*/
footer {
/*
	color:white;
*/
}