@charset "UTF-8";

/* ---------------------------------------------------------------------------------------------
	基本設定
---------------------------------------------------------------------------------------------*/

/* インポート */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');
@import url(destyle.css);

/* 変数 */
:root {
	--DefaultFont: 'Noto Sans JP', "Meiryo", "メイリオ", "Hiragino Sans", "ヒラギノ角ゴシック", sans-serif;
	--Font-Awesome: bold 1em/1 "Font Awesome 5 Free";
	--AwardGap: 16px;
	--color1: #2CAF6D;
	--color2: #FF8000;
}

html { font: 500 16px/1.7 var(--DefaultFont); color: #454545; -webkit-text-size-adjust: 100%; animation: fadeIn 1.5s ease 0s 1 normal; }
@keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1} }

body { background: #FEE89F; }


a { transition: .4s; }
a:hover { opacity: .75; transition: .4s; }
img { max-width: 100%; }

.Mb005 { margin-bottom: 0.5em!important; }
.Mb010 { margin-bottom: 1em!important; }
.Mb015 { margin-bottom: 1.5em!important; }
.Mb020 { margin-bottom: 2em!important; }

.left { text-align: left; }
.center { text-align: center; }

:is(ul, ol).disc { list-style: disc; }


.wrap { width: 90%; max-width: 1100px; margin: 0 auto; }

body#index .wrap { width: 90%; max-width: 1000px; margin: 0 auto; }

body:not(#index) article { width: 90%; max-width: 1100px; background: #fff; margin: 0 auto 2rem auto; padding: 1.25rem; }

@media screen and ( 768px <= width ), print {
	body:not(#index) article { padding: 50px; }
}



.Ttl01 { text-align: center; font-size: 1.25rem; background: #2CAF6D; color: #fff; border-radius: 50px; padding: 12px 20px; }
.Ttl01.icon::before { font: var(--Font-Awesome); margin-right: .25em; }
.Ttl01.icon::before { content: "\f030"; }
.Ttl01.award { background: var(--color2); }
.Ttl01.award.icon::before { content: "\f091"; }

@media screen and ( 768px <= width ), print {
	.Ttl01 { font-size: 1.75rem; }
}

ul.menu { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 1rem; font-size: 1.25rem; text-align: center; margin: 1.25rem 0; }
ul.menu li { width: 100%; }
ul.menu li a { display: block; color: #fff; text-decoration: none; border-radius: 50px; padding: 12px 28px; }
ul.menu li:nth-of-type(1) a { background: var(--color1); }
ul.menu li:nth-of-type(2) a { background: var(--color2); }
ul.menu li a::before { font: var(--Font-Awesome); margin-right: .25em; }
ul.menu li:nth-of-type(1) a::before { content: "\f030"; }
ul.menu li:nth-of-type(2) a::before { content: "\f091"; }

@media screen and ( 768px <= width ), print {
	ul.menu { flex-wrap: nowrap; font-size: 1.75rem; margin: 2rem 0; }
	ul.menu li a { padding: 12px 28px; }
}


/* ---------------------------------------------------------------------------------------------
	共通パーツ
---------------------------------------------------------------------------------------------*/

/* ヘッダー */
header { background: #fff; }
header #header { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; padding: 16px 1rem; }
@media screen and ( 768px <= width ), print {
	header #header { justify-content: space-between; }
}
header #header span { font-size: 1.5em; font-weight: 700; margin: 4px; }
header #header p { font-size: .75rem; margin: 0 auto; }
@media screen and ( 768px <= width ), print {
	header #header p { font-size: 1rem; margin: 0 0 0 auto; }
}

/* フッター */
footer { background: var(--color1); color: #fff; text-align: center; padding: 1em 0; }
footer span { font-size: 0.5em; }


/* ---------------------------------------------------------------------------------------------
	トップページ - index.html
---------------------------------------------------------------------------------------------*/

body#index { background: #FEE89F url(../img/back.jpg) no-repeat top/contain; text-align: center; }

body#index .MainVisual .logo { margin: auto; max-width: 95%; padding: 2em 0 0 0; }
@media screen and ( 768px <= width ), print {
	body#index .MainVisual .logo { width: 1000px; }
}

body#index .text1 { font-size: 2em; font-weight: 700; text-align: center; letter-spacing: -2px; margin: 0 0 4px 0; }
body#index .text2 { font-size: 1.2em; text-align: center; margin: 0 0 40px 0; }

body#index .AwardList { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--AwardGap); margin-bottom: 40px; }
body#index .AwardList > div { position: relative; width: 100%; max-width: 480px; background: #fff; font-size: 1.75rem; font-weight: 700; border-radius: 50px; display: flex; align-items: center; padding: 12px 0; }
@media screen and ( 1024px <= width ), print {
	body#index .AwardList > div { width: 100%; max-width: none; }
}

body#index .AwardList > div::before { content: "\f521"; font: var(--Font-Awesome); font-size: 1.5em; margin: 0 12px 0 20px; }

body#index .AwardList > div.award3 { font-size: 1.25em; padding: 16px 0; }
@media screen and ( 1024px <= width ), print {
	body#index div:is(.award1, .award2) { width: calc((100% - var(--AwardGap)) / 2 ); }
	body#index div.award3 { width: calc((100% - (var(--AwardGap) * 2)) / 3 ); }
}

body#index .AwardList > div.award1::before { color: #D4C23C; }
body#index .AwardList > div.award2::before { color: #A3A4A3; }
body#index .AwardList > div.award3::before { color: #B0883E; }


body#index .AwardList > div span { position: absolute; right: 4px; background: #E9527E; color: #fff; font-size: 1.25rem; border-radius: 50%; line-height: 1.15; text-align: center; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; align-content: center; flex-wrap: wrap; margin-right: 4px; padding: 4px; }
body#index .AwardList > div span::after { content: "名様"; display: block; font-size: .6em; width: 100%; }


body#index .Btn { display: flex; flex-wrap: wrap; gap: 1rem; margin: 40px auto; }
body#index .Btn > div { width: 100%; }

@media screen and ( 768px <= width ), print {
	body#index .Btn { flex-wrap: nowrap; }
}


body#index .Btn a { display: block; color: #fff; text-decoration: none; border-radius: 50px; font-weight: bold; text-align: center; padding: 1em 1em;
	@media screen and ( 768px <= width ), print {
		max-width: 520px; font-size: 1.5rem;
	}
}

body#index .Btn > div:nth-of-type(1) a { background: var(--color1); }
body#index .Btn > div:nth-of-type(2) a { background: var(--color2); }

body#index table { width: 100%; border-collapse: collapse; margin-bottom: 1em; }
body#index table :is(th, td) { background: #fff; border: 2px #FEE89F solid; padding: 1em; }
body#index table th { font-weight: 600; white-space: nowrap; }
body#index table td { text-align: left; }
body#index table td p { width: fit-content; background-color: #666; color: #fff; border-radius: 50px; margin: 0; padding: 0.2em 1em; }
body#index table td ul { margin: 0 0 0 1.5em; }


/* ---------------------------------------------------------------------------------------------
　下層ページ共通
---------------------------------------------------------------------------------------------*/

article > section { margin-top: 2rem; }

/* ---------------------------------------------------------------------------------------------
	エントリー - entry.html
---------------------------------------------------------------------------------------------*/

article.entry h2 { font-size: 1.25rem; }
article.entry h3 { font-size: 1.2rem; color: #2CAF6D; margin-bottom: 0.5rem; }
article.entry h3::before { content: "■"; }
article.entry .box01 { box-shadow: 2px 2px 10px #cccccc; border-radius: 8px; padding: 1.25rem; }
article.entry .box02 { box-shadow: 2px 2px 10px #cccccc; border-radius: 8px; padding: 1.25rem; margin-bottom: 2rem;}
article.entry .EntryBtn { text-align: center; margin-top: 1.5rem; }
article.entry .EntryBtn button { width: 100%; font-size: 1.25rem; background: #f3f3f3; border: 1px solid #ccc; border-radius: 4px;text-align: center; padding: 0 1rem; margin-bottom: 1rem;}
article.entry .EntryBtn input { font-size: 1.25rem; background: #f3f3f3; border: 1px solid #ccc; border-radius: 4px;text-align: center; padding: 0 1rem; }
article.entry ul { list-style-type: disc; font-weight: 400; margin-left: 1.5rem;}
article.entry p { font-weight: 400; }
article.entry input { width: 100%; border: 1px #CCC solid; padding: 0.2rem 0.5rem; }
article.entry select { border: 1px #CCC solid; padding: 0.2rem 0.5rem; }
article.entry textarea { width: 100%;  border: 1px #CCC solid; padding: 0.2rem 0.5rem; }
article.entry dt { width: 100%; float: left; padding: 1rem; }
article.entry dd { width: 100%; float: left; padding: 1rem; }
article.entry hr { border: #CCC 0.5px dotted; }
.wider { width: 100%; }
.clearfix::after { content: ""; display: block; clear: both; }

@media screen and ( 768px <= width ), print {
	article.entry dt { width: 30%; }
	article.entry dd { width: 70%; }
	article.entry .EntryBtn button { width: auto; margin-bottom: 0;}
	article.entry input { width: auto; }
}


/* ---------------------------------------------------------------------------------------------
	過去の受賞作品 - award.html
---------------------------------------------------------------------------------------------*/

.AwardPageList { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.AwardPageList li:nth-of-type(1) img { object-position: 0 -35px; }
.AwardPageList li:nth-of-type(2) img { object-position: 50% 50%; }
.AwardPageList li figure figcaption { text-align: center; margin-bottom: 4px; }
.AwardPageList li figure img { aspect-ratio: 4 / 3; object-fit: cover; }

@media screen and ( 768px <= width ), print {
	.AwardPageList { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}


/* ---------------------------------------------------------------------------------------------
　フォトコンテスト結果発表ページ - award20XX.html
---------------------------------------------------------------------------------------------*/

.photocon { text-align: center; font-size: .75rem; }

@media screen and ( 768px <= width ), print {
	.photocon { font-size: .85rem; }
}

.photocon p { color: #777; font-size: 2.5em; font-weight: 700; margin-top: 2em; }
.photocon img { max-width: 100%; object-fit: cover; aspect-ratio: 1/1; margin-bottom: 0.5em; pointer-events: none; }
.photocon ul { display: flex; justify-content: center; list-style: none; }
.photocon li { position: relative; }
.photocon li::before { content: ""; background: url(../img/lightbox/zoom.png); background-size: contain; position: absolute; top: 10px; left: 10px; z-index: 9; display: block; width: 20px; height: 20px; }
.photocon li a { display: block; }
.photocon li.aspect25-17 img { aspect-ratio: 25/17; }
.photocon li.aspect4-3 img { aspect-ratio: 4/3; }
.photocon li.aspect16-9 img { aspect-ratio: 16/9; }

.photocon span.title { font-size: 1.25em; font-weight: 700; }

.photocon #color1 { color: #be9124; }
.photocon #color2 { color: #AAA; }
.photocon #color3 { color: #9A4629; }

.photocon [id^="con"] li { background: #000; color: #FFF; line-height: 1.5em; margin: 1%; padding-bottom: 0.5em; }

@media all and ( max-width:767px ) {
	.photocon ul { flex-wrap: wrap; }
	.photocon [id^="con"] li { width: 48%; }
	.photocon #con1 li { width: fit-content; }
}

@media screen and ( 768px <= width ), print {
	.photocon #con1 li { width: fit-content; }
	.photocon #con2 li { width: 48%; }
	.photocon #con3 li { width: 31.3%; }
	.photocon #con4 li { width: 23%; }
}


