@charset "utf-8";
/*
Theme Name: AWARD アウトリーチ 活動支援
*/
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Noto+Sans+JP:wght@100..900&display=swap');


/*reset*/
/*******************************************************************/
html{box-sizing:border-box;overflow-y:scroll;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{width:auto;max-width:100%;height:auto;border-style:none;vertical-align:middle}i{vertical-align:middle}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none}i,em{font-style:normal}
a { color: #222; transition: all .2s ease-out; text-decoration: none;}
a:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); opacity: 0.6;}
*:focus { outline: none;}


/*LAYOUT*/
/*******************************************************************/
html { font-size: 62.5%;}
body { -webkit-text-size-adjust: 100%; -webkit-overflow-scrolling: touch; font-family: 'Noto Sans JP', sans-serif; font-size: clamp(1.4rem,1.6vw,1.6rem); line-height: 1.4; font-feature-settings: 'palt'; color: #222;}
#container { width: 100%; overflow: hidden;}
i { font-family: "Figtree", sans-serif;}


/*HEADER*/
/*******************************************************************/
#header { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-right: 24px; z-index: 5000; transition: .2s ease-out;}
#header.is-fixed { background: #FFF;}
#logo { margin-right: auto;}
#logo a { display: flex; align-items: center; gap: 16px; font-size: 1.4rem; white-space: nowrap;}
@media only screen and (min-width: 1141px){
	#nav { display: flex; align-items: center; gap: 24px; padding-bottom: 24px; transition: .2s ease-out;}
	#nav ul { display: flex; gap: 8px 24px; font-size: 1.4rem; font-weight: 500; white-space: nowrap;}
	#header #logo a figure { width: 120px; transition: .2s ease-out;}
	#header.is-fixed #logo a figure { width: 80px;}
	#header.is-fixed #nav { padding-bottom: 0;}
	#open { display: none;}
}
@media only screen and (max-width: 1140px){
	#logo a { font-size: 1.2rem;}
	#logo a figure { width: 80px;}
	#nav { pointer-events: none; opacity: 0; position: fixed; top: 0; right: 0; transform: translateX(100%); min-width: 200px; max-height: 100svh; padding: 88px 56px 64px; background: #F4F8FB; border-bottom-left-radius: 30px; box-shadow: 0 0 48px rgba(0,0,0,.15); z-index: 1000; transition: .4s cubic-bezier(.645,.045,.355,1); overflow-y: auto; overscroll-behavior: contain;}
	#nav ul { margin-bottom: 40px; list-style: none;}
	#nav li { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px dashed #707070;}
	#nav li a { display: block; font-size: 1.6rem;}
	#open { position: relative; display: block; width: 26px; height: 18px; cursor: pointer; z-index: 9999;}
	#open div { position: relative; display: block; width: 26px; height: 18px; transition: .2s linear;}
	#open span { position: absolute; left: 0; display: block; width: 26px; height: 2px; background: #1069AB; transition: .2s linear;}
	#open span:nth-child(1) { top: 4px;}
	#open span:nth-child(2) { top: 14px;}
	.open #open span:nth-child(1) { top: 9px; transform: rotate(45deg);}
	.open #open span:nth-child(2) { top: 9px; transform: rotate(-45deg);}
	.open #nav { pointer-events: auto; opacity: 1; transform: translateY(0);}
}


/*FOOTER*/
/*******************************************************************/
#footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; width: 90%; max-width: 1092px; margin: 0 auto; padding: 40px 0;}
.logo { display: grid; gap: 8px; font-size: 1.3rem; color: #999;}
.sitemap { display: flex; align-items: center; gap: 16px;}
.sitemap ul { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 1.4rem; font-weight: 500;}
.copyright { width: 100%; text-align: center; font-size: 1.3rem; color: #999;}
@media only screen and (max-width: 1140px){
	#footer { flex-direction: column;}
	.sitemap { flex-direction: column;}
	.sitemap ul { justify-content: center;}
}


/*CONTENTS*/
/*******************************************************************/
article { position: relative; padding: 80px 0;}
section { position: relative; width: 90%; max-width: 1000px; margin: 0 auto;}
section + header, section + section { margin-top: 80px;}
p, dt, dd { margin-bottom: 0; line-height: 2;}
p:not(:last-child) { margin-bottom: 16px;}
.narrow { max-width: 780px;}
.wide { max-width: 1466px;}
.center { text-align: center;}
.btn { display: flex; justify-content: center;}
.btn a { display: flex; justify-content: center; align-items: center; gap: 16px; min-width: 314px; min-height: 61px; padding: 8px 48px 8px 32px; background: #D65582 url(img/right-chevron.svg) right 32px center no-repeat; border-radius: 40px; font-size: clamp(1.6rem,1.9vw,1.9rem); font-weight: 900; color: #FFF; box-shadow: 0 3px 0 #AF4268;}
.btn a:hover { opacity: 1; transform: translateY(3px); box-shadow: 0 0 0 #AF4268;}
.btn a.min { min-width: 180px; min-height: 42px; padding: 8px 24px; background-image: none; font-size: 1.3rem; font-weight: 700; white-space: nowrap;}
.mt8 { margin-top: 8px;}
.mt16 { margin-top: 16px;}
.mt24 { margin-top: 24px;}
.mt48 { margin-top: 48px;}
.mt96 { margin-top: 96px;}
.fs12 { font-size: clamp(1.0rem,1.2vw,1.2rem);}
.fs13 { font-size: clamp(1.1rem,1.3vw,1.3rem);}
.fs14 { font-size: clamp(1.4rem,1.4vw,1.4rem);}
.fs15 { font-size: clamp(1.3rem,1.5vw,1.5rem);}
.fs16 { font-size: clamp(1.4rem,1.6vw,1.6rem);}
.fs17 { font-size: clamp(1.4rem,1.7vw,1.7rem);}
.fs18 { font-size: clamp(1.5rem,1.8vw,1.8rem);}
.fs20 { font-size: clamp(1.6rem,2.0vw,2.0rem);}
.fs22 { font-size: clamp(1.7rem,2.2vw,2.2rem);}
.fs24 { font-size: clamp(1.8rem,2.4vw,2.4rem);}
.fs26 { font-size: clamp(1.9rem,2.6vw,2.6rem);}
.fs28 { font-size: clamp(2.0rem,2.8vw,2.8rem);}
.fs30 { font-size: clamp(2.1rem,3.0vw,3.0rem);}
.fs32 { font-size: clamp(2.2rem,3.2vw,3.2rem);}
.fs34 { font-size: clamp(2.3rem,3.4vw,3.4rem);}
.fs36 { font-size: clamp(2.4rem,3.6vw,3.6rem);}
.fs38 { font-size: clamp(2.5rem,3.8vw,3.8rem);}
.fs40 { font-size: clamp(2.6rem,4.2vw,4.0rem);}
.fs42 { font-size: clamp(2.7rem,4.2vw,4.2rem);}
.fs44 { font-size: clamp(2.8rem,4.4vw,4.4rem);}
.fs46 { font-size: clamp(2.9rem,4.6vw,4.6rem);}
.fs48 { font-size: clamp(3.0rem,4.8vw,4.8rem);}
.fs50 { font-size: clamp(3.1rem,5.0vw,5.0rem);}
.fs55 { font-size: clamp(3.2rem,5.5vw,5.5rem);}
.fs70 { font-size: clamp(3.2rem,7vw,7rem);}
.light { font-weight: 300;}
.regular { font-weight: 400;}
.medium { font-weight: 500;}
.bold { font-weight: 700;}
.black { font-weight: 900;}
.ls { letter-spacing: 0.1em;}
.blue { color: #1069AB;}
.yellow { color: #FFEC5D;}
.pink { color: #D65582;}
.white { color: #FFF;}
.grey { color: #777;}
.marker { display: inline; padding: 0 1px; background: linear-gradient(transparent 70%, #FFEC5D 0%);}
.emphasis { text-emphasis: filled dot; text-emphasis-position: over;}
.sp { display: none;}
.fadeInUp { animation-name: fadeInUp;}
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 30px, 0);} to { opacity: 1; transform: translate3d(0, 0, 0);} }
.animated { opacity: 0; animation-duration: 1s; animation-fill-mode: both;}


#mv { display: grid; grid-template-columns: 50% 50%; align-items: center; padding-bottom: 0; background: url(img/grid.png) center repeat;}
#mv section { margin-right: 0; z-index: 10;}
#mv img { width: 100%;}
#mv .btn { justify-content: flex-start;}
.mv { position: relative;}
.mv .swiper-pagination { position: absolute; top: 40px; left: 0; display: flex; flex-direction: column; gap: 16px;}
.swiper-pagination-bullet { display: flex; align-items: center; gap: 4px; background: none; opacity: 1; font-family: "Figtree", sans-serif; font-size: 1rem; font-weight: 700; color: #DBEAF0; cursor: pointer;}
.swiper-pagination-bullet::after { content: ''; display: block; width: 9px; min-width: 9px; height: 9px; background: #DBEAF0; border-radius: 50%;}
.swiper-pagination-bullet-active { color: #1069AB;}
.swiper-pagination-bullet-active::after { background-color: #1069AB;}
#mv .marquee { position: absolute; bottom: 0; left: 0;}
.marquee { width: 100%; overflow: hidden;}
.marquee .swiper-wrapper { transition-timing-function: linear;}
.marquee .swiper-slide { width: auto;}
.marquee img { width: auto; display: block;}

#problem { background: url(img/bg.webp) center top no-repeat; background-size: cover;}
.problem ul { display: grid; gap: 5px;}
.problem li { padding: 1em 3em; background: #FFF url(img/check.svg) 1em center no-repeat; border-radius: 6px; background-size: 1.5em auto;}
.deco01 { position: absolute; top: 0; right: 2em;}
.deco02 { position: absolute; bottom: -3em; right: 0;}

.activity ul { display: grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap: 20px;}
.activity li { position: relative; height: auto; margin-top: 56px; background: #FFF; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,.11); z-index: 0;}
.activity li i { position: absolute; top: 0; left: 0; transform: translateY(-70%); display: block; width: 100%; text-align: center; font-size: 6.4rem; font-weight: 700; z-index: -1;}
.activity li p { padding: 2em;}
.activity li:nth-child(1) i { color: #D65582;}
.activity li:nth-child(2) i { color: #3A78C1;}
.activity li:nth-child(3) i { color: #55A86C;}
.activity li:nth-child(4) i { color: #EF9953;}
.activity li:nth-child(5) i { color: #57C0E2;}
.activity li:nth-child(6) i { color: #E0D15F;}
.activity li:nth-child(7) i { color: #8570CB;}
.activity li:nth-child(8) i { color: #69C3BF;}
.activity li:nth-child(9) i { color: #D97171;}
.activity li:nth-child(10) i { color: #83BF3F;}
.activity-title { display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 1em;}

#ai { background: #F4F8FB;}
.ai h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px;}
.ai h3 i { padding-right: 24px; border-right: 2px solid #1069AB;}
.ai > ul { display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: 40px;}
.ai > ul > li { padding: 2em; background: #FFF; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,.11);}
.ai .col { display: grid; grid-template-columns: 36% 1fr; align-items: center; gap: 24px;}
.ai .col ul { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 10px;}
.ai .col li { padding: 1em; background: #FFF; border: 1px solid #1069AB; border-radius: 10px;}

.cta { background: url(img/grid2.png) center repeat;}
.cta h2 { display: inline-block; padding-bottom: 8px; border-bottom: 2px solid #FFF;}
.deco03 { position: absolute; bottom: 0; left: 0;}
.deco04 { position: absolute; bottom: 0; right: 0;}

.reason ul { display: grid; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); gap: 24px;}
.reason li { position: relative; margin-top: 56px; padding: 2em; background: #FFF; border: 1px solid #1069AB; border-radius: 10px;}
.reason li i { position: absolute; top: 0; left: 0; transform: translateY(-70%); display: block; width: 100%; text-align: center; font-size: 8rem; font-weight: 700; color: #1069AB; z-index: -1;}
.reason li img { max-width: 160px;}

#works { padding-bottom: 0; background: #F4F8FB;}
.works-title { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 24px 40px;}
.works .swiper, .works2 .swiper { overflow: visible;}
.swiper-scrollbar { position: relative !important; width: 300px !important; height: 6px !important; margin: 40px auto 0; background: #DFE5E9;}
.swiper-scrollbar-drag { background: #2983C5;}
.uni { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 12px;}
.uni li { display: flex; justify-content: center; align-items: center; height: 60px; background: #FFF; border-radius: 5px;}
.uni li img { width: 80%; height: 80%; object-fit: scale-down;}
.works2 { padding: 80px 0;}
.works2::before { content: ''; position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; height: 100%; background: rgba(255,255,255,.6);}
.works2 .swiper-slide { display: flex; flex-direction: column; gap: 24px; height: auto;}
.works2 .swiper-slide .btn { margin-top: auto;}
.works2 .swiper-slide .btn a { min-width: 160px; min-height: 48px; background-image: url(img/arrow.svg); box-shadow: none;}

.flow ul { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 24px 40px;}
.flow li { position: relative; margin-top: 56px; padding: 56px 2em 2em; background: #FFF; border: 1px solid #1069AB; border-radius: 10px;}
.flow li i { position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%); display: flex; justify-content: center; align-items: center; width: 76px; height: 76px; background: #1069AB; border-radius: 50%; font-size: 2.4rem; color: #FFF;}
.flow li img { max-width: 120px;}
.flow li:not(:first-child)::before { content: ''; position: absolute; top: 50%; left: -40px; transform: translateY(-50%) rotate(45deg); display: block; width: 24px; height: 24px; border-top: 2px solid #1069AB; border-right: 2px solid #1069AB;}
.best { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; padding: 1em 4em; background: #F8FDFF; border: 5px solid #DDF1FF; border-radius: 10px;}

.faq h3 { position: relative; margin-bottom: 0; padding: 24px 32px 24px 48px; border-bottom: 1px dashed #707070; font-size: clamp(1.6rem,1.8vw,1.8rem); font-weight: 500; cursor: pointer;}
.faq h3::before { content: 'Q.'; position: absolute; top: 50%; left: 0; transform: translateY(-50%); font-family: "Figtree", sans-serif; font-size: clamp(2em,3vw,3rem); color: #1069AB;}
.faq h3::after { content: ''; position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width:0; height:0; border-style:solid; border-width: 12px 7px 0 7px; border-color: #96BCEA transparent transparent transparent; transition: .2s ease-out}
.faq h3.on::after { transform: translateY(-50%) rotate(180deg);}
.faq .contents { position: relative; display: none; padding: 24px 0 16px 48px;}
.faq .contents::before { content: 'A.'; position: absolute; top: 16px; left: 4px; font-family: "Figtree", sans-serif; font-size: clamp(2em,3vw,3rem); font-weight: 700; color: #D65582;}

#about { background: #F4F8FB;}
.about .col { display: grid; grid-template-columns: 1fr 38%; gap: 24px;}
.about ul { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 10px;}
.about li { display: flex; justify-content: center; align-items: center; text-align: center; min-height: 60px; padding: 8px; background: #1069AB; border-radius: 10px;}






@media only screen and (max-width: 1024px){
	.mt24 { margin-top: 24px;}
	.mt48 { margin-top: 32px;}
	.mt96 { margin-top: 48px;}
	.pc { display: none;}
	.sp { display: block;}
	.btn a { background-size: 10px auto;}


	#mv { grid-template-columns: 100%; gap: 24px; padding-top: 120px;}
	#mv section { margin-right: auto;}
	#mv .btn { justify-content: center;}
	.mv { margin-left: 10%;}
	.mv .swiper-pagination { top: 16px; left: -16px;}
	#mv .marquee { position: relative;}
	.marquee img { height: 64px;}

	.deco01 { top: auto; bottom: -80px; right: auto; left: 0;}
	.deco02 { bottom: -80px;}

	.ai h3 { flex-direction: column;}
	.ai h3 i { padding-right: 0; border-right: none;}
	.ai > ul { gap: 24px;}
	.ai .col { grid-template-columns: 100%;}

	.cta { padding: 40px 0 100px;}
	.deco03, .deco04 { bottom: -100px;}
	.deco03 img, .deco04 img { width: auto; height: 80px;}

	.works-title { grid-template-columns: 1fr;}

	.flow li { padding: 40px 2em 2em;}
	.flow li i { width: 56px; height: 56px;}
	.flow li:not(:first-child)::before { top: -72px; left: 50%; transform: translateX(-50%) rotate(135deg);}
	.best { grid-template-columns: 100%; padding: 1em 2em;}
	.best figure { text-align: center;}

	.about .col { grid-template-columns: 1fr;}
}





@media print {
#container { width: 1024px;}
}