@charset "utf-8";
/* CSS Document */



/*----------------------------------------
Variables
----------------------------------------*/
:root {
--c_main: #1e7246;
--c_sub: #e6eee9;
--c_sub2: #e7e186;
--c_black: #333333;
--c_gray: #CCCCCC;
--c_dark-gray: #707070;
--c_light-gray: #EEEEEE;
--c_light-gray2: #E7E7E7;
--c_white: #FFFFFF;
--c_action: #FF7600;
--c_alert: #DF5656;
}

/*----------------------------------------
reset
----------------------------------------*/
*,
::before,
::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

* {
font-size: inherit;
line-height: inherit;
}

::before,
::after {
text-decoration: inherit;
vertical-align: inherit;
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header, main, menu, nav, section,
time, mark, audio, video {
margin: 0;
padding: 0;
vertical-align: baseline;
}

header, footer, article, section, aside, main, nav, menu, figure, figcaption {
display: block;
}

span, small, strong, em, b, i {
color: inherit;
}

html {
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
overflow-x: hidden;
overflow-y: auto;
}

a {
color: var(--c_main);
transition: color 0.3s;
}
a:hover {
color: var(--c_sub2);
text-decoration: none;
}
a[href^="tel"] {
pointer-events: none;
text-decoration: none;
color: #fff;
}
ul,
ol {
list-style: none;
}

img {
max-width: 100%;
height: auto;
border: 0;
vertical-align: top;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

caption, th {
text-align: left;
}

input, select {
vertical-align: middle;
}

input, textarea {
margin: 0;
padding: 0;
}

address {
font-style: normal;
}

q::before,
q::after {
display: none;
}


/*----------------------------------------
base
----------------------------------------*/
body {
color: var(--c_black);
font-family: "Zen Kaku Gothic New", sans-serif;
line-height: 1.5;
}
a {
color: var(--c_main);
transition: color 0.3s;
}
a:hover {
color: var(--c_sub2);
text-decoration: none;
}

/*----------------------------------------
header
----------------------------------------*/
.header {
position: fixed;
left: 0;
top: 0;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 50px;
background: var(--c_main);
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.header__logo {
flex-shrink: 0;
	position: relative;
	z-index: 101;
width: 105px;
margin-left: 20px;
}
.header__logo a {
	display: block;
}
.header__logo a img {
	display: block;
}


#menu_btn {
	position: relative;
	z-index: 101;
	width: 32px;
	height: 16px;
	margin-right: 20px;
}
.menu-trigger,
.menu-trigger div {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
.menu-trigger {
	position: absolute;
	right: 0;
	top: 0;
	z-index: 10;
	width: 100%;
	height: 16px;
}
.menu-trigger:hover {
	opacity: 1;
}
.menu-trigger div {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--c_white);
	border-radius: 4px;
	transition: all .3s;
}	
.menu-trigger div:nth-of-type(1) {
	top: 0;
}
.menu-trigger div:nth-of-type(2) {
	top: 7px;
}
.menu-trigger div:nth-of-type(3) {    
	bottom: 0;
}

.menu-trigger.active div {
	background-color: #fff;
}
.menu-trigger.active div:nth-of-type(1) {
	transform: translateY(7px) rotate(-45deg);
}
.menu-trigger.active div:nth-of-type(2) {
	opacity: 0;
}
.menu-trigger.active div:nth-of-type(3) {
	transform: translateY(-7px) rotate(45deg);
	width: 100%;
}


@media (min-width: 992px) {
.header {
height: 100px;
}
.header__logo {
width: 210px;
margin-left: 50px;
}
	#menu_btn {
		display: none;
	}
}


@media (min-width: 992px) {
.hamburger {
display: none;
}
}

/*----------------------------------------
gnav
----------------------------------------*/
.gnav {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 100;
	width: 100%;
	height: 100vh;
	padding-top: 50px;
	background-color: var(--c_main);
	transition: all .3s;
	opacity: 0;
	pointer-events: none;
}
#gnav.open {
	opacity: 1;
  pointer-events: auto;
}

.gnav__list li {
	text-align: center;
	border-bottom: 1px solid var(--c_main);
	background-color: var(--c_sub);
}
.gnav__link {
	display: block;
	padding: 10px 0;
}

.gnav__link {
color:var(--c_main);
font-weight: bold;
text-decoration: none;
}
.gnav__link:hover {
color:#f2e877;
}

@media (min-width: 992px) {
.gnav {
	display: block;
	position: static;
	left: auto;
	top: auto;
	width: auto;
	height: auto;
	padding-top: 0;
	background-color: transparent;
	opacity: 1;
  pointer-events: auto;
}
.gnav__list {
display: flex;
}
.gnav__list li {
	text-align: left;
	border-bottom: none;
	background-color: transparent;
}
.gnav__link {
	color:#fff;
	padding: 1em;
	font-size: 19px;
}
/*現在位置の指定をaria-current属性に変更*/
.gnav__link[aria-current]::after {
content: "";
display: block;
width: 100%;
height: 4px;
background: var(--c_main);
}
}

/*----------------------------------------
main-contents
----------------------------------------*/
.main-contents {
margin-top: 50px;
}
@media (min-width: 992px) {
.main-contents {
margin-top: 100px;
}
}

/*----------------------------------------
footer
----------------------------------------*/
.footer {
padding: 0 20px;
background: var(--c_main);
color: var(--c_white);
}
.footer__menu > li{
/*border-bottom: 1px solid var(--c_white);*/
}
.footer__menu p {
display: block;
padding:  6px;
color: #fff;
font-weight: 500;
font-size: 14px;
text-align: center;
}
/*
.footer__menu a {
display: block;
padding: 1em 20px;
color: var(--c_white);
font-size: 14px;
font-weight: bold;
text-decoration: none;
}*/
.footer__title {
font-size: 18px;
text-align: center;
font-weight: 500;
padding-top: 30px;
}
.footer__copyright {
padding: 10px 0 20px 0;
font-size: 14px;
font-weight: bold;
text-align: center;
}
@media (min-width: 768px) {
.footer {
/*display: flex;
justify-content: space-between;
align-items: center;*/
padding: 0 50px;
}

.footer__menu {
/*border-right: 1px solid var(--c_white);*/
}
.footer__menu > li {
	text-align: center;
/*display: inline-block;
border-left: 1px solid var(--c_white);
border-bottom: 0;*/
}
.footer__menu a {
padding: 0 1em;
}
.footer__menu a:hover {
text-decoration: underline;
}
}

/*----------------------------------------
container
----------------------------------------*/
.container {
max-width: 1120px;
margin: auto;
padding-left: 20px;
padding-right: 20px;
}

.container-solution {
margin: auto;
padding-left: 20px;
padding-right: 20px;
background-image: linear-gradient(150deg, rgba(255, 250, 227, 1) 10%, rgba(254, 248, 172, 1) 90%);
}
.container-exm {
background-position: center;
background-size: cover;
background-image: url('../images/b_img01.png');
margin: auto;
padding-left: 20px;
padding-right: 20px;
}
.solution-image {
display: block;
margin: auto;
padding: 10px;
}

/*----------------------------------------
section
----------------------------------------*/
.section {
padding-top: 40px;
padding-bottom: 40px;
}
.section + .section {
padding-top: 0;
}
.section__button {
margin-top: 40px;
}
@media (min-width: 768px) {
.section {
padding-top: 80px;
padding-bottom: 80px;
}
.section__button {
margin-top: 60px;
}
}

/*----------------------------------------
ボタン
----------------------------------------*/

/*ボタンベース
-----------------------------------*/
.button {
-webkit-appearance: none;
appearance: none;
display: inline-block;
width: 100%;
border: 2px solid transparent;
font-family: inherit;
font-weight: bold;
text-align: center;
text-decoration: none;
line-height: 1;
transition: 0.3s;
cursor: pointer;
}

/*ボタンサイズ
-----------------------------------*/
.button--lg {
max-width: 400px;
padding: 20px;
font-size: 18px;
	background: #d6cb2d;
}

/*ボタン種類
-----------------------------------*/
/*標準*/
.button--default {
background: var(--c_main);
color: var(--c_white);
}
.button--default:hover,
.button--default:focus {
opacity: 0.7;
color: #b1a528;
}

/*枠線*/
.button--outline {
border: 2px solid var(--c_main);
background: var(--c_white);
color: var(--c_black);
}
.button--outline:hover,
.button--outlien:focus {
background: var(--c_sub);
color: var(--c_black);
}

/*透過*/
.button--ghost {
border-radius: 60px;
border: 2px solid #26754d;
color: var(--c_main);
}
.button--ghost:hover,
.button--ghost:focus {
background: #f2e877;
color: #155b36;
}

/*Action*/
.button--action {
background: var(--c_action);
color: var(--c_white);
}
.button--action:hover,
.button--action:focus {
opacity: 0.7;
color: var(--c_white);
}

/*Disabled*/
.button--disabled,
.button[disabled] {
background: var(--c_gray);
color: var(--c_white);
opacity: 1;
cursor: default;
}

/*ボタンレイアウト
-----------------------------------*/
.button-center {
display: flex;
flex-direction: column;
align-items: center;;
gap: 20px;
}
@media (min-width: 768px) {
.button-center {
flex-direction: row;
justify-content: center;
}
}

/*アイコン配置
-----------------------------------*/
.button i:first-child {
margin-right: 0.5em;
}
.button i:last-child {
margin-left: 0.5em;
}

/*----------------------------------------
テキストスタイル
----------------------------------------*/
/*基本テキストスタイル*/
body {
color: var(--c_black);
font-family: "Zen Kaku Gothic New", sans-serif;
line-height: 1.75;
}
/*基本リンクスタイル*/
a {
color: var(--c_main);
transition: color 0.3s;
}
a:hover {
color: var(--c_sub2);
text-decoration: none;
}
/*強調*/
.text-strong {
font-weight: bold;
}
/*警告*/
.text-alert {
color: var(--c_alert);
font-weight: bold;
}
/*注釈*/
.text-note {
margin-left: 1em;
text-indent: -1em;
color: var(--c_dark-gray);
font-size: 0.875em;
}

/*----------------------------------------
リスト
----------------------------------------*/
/*ノーマル*/
.list-normal {
display: grid;
gap: 1em;
}
.list-normal > li{
position: relative;
padding-left: 1em;
}
.list-normal > li::before {
position: absolute;
left: 0;
top: 0.75em;
content: ""
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--c_main);
}
/*矢印リンク*/
.list-arrow {
display: grid;
gap: 1em;
}
.list-arrow > li{
position: relative;
padding-left: 1em;
}
.list-arrow > li::before {
position: absolute;
left: 0;
top: 0.75em;
content: ""
display: block;
width: 0.625em;
height: 0.625em;
border-top: 2px solid var(--c_main);
border-right: 2px solid var(--c_main);
transform: rotate(45deg);
}
.list-arrow a {
color: inherit;
text-decoration: none;
}
.list-arrow a:hover,
.list-arrow a:focus {
color: var(--c_main);
}
/*数字リンク*/
.list-decimal {
display: grid;
gap: 1em;
}
.list-decimal > li {
margin-left: 1em;
list-style-type: decimal;
}

/*----------------------------------------
枠囲み
----------------------------------------*/
/*枠囲み（標準）*/
.frame {
border: 2px solid var(--c_main);
padding: 40px;
}
.frame__title {
padding-left: 20px;
border-left: 2px solid var(--c_main);
font-size: 24px;
font-weight: bold;
line-height: 1.5;
}
.frame__title + * {
margin-top: 30px;
}
/*枠囲み（警告）*/
.frame--alert {
border: 2px solid var(--c_alert);
color: var(--c_alert);
font-weight: bold;
}
.frame--alert .frame__title {
display: flex;
align-items: center;
padding-left: 0;
border-left: 0;
}
.frame--alert .frame__title::before {
flex-shrink: 0;
content: ""
display: inline-block;
width: 40px;
height: 40px;
margin-right: 10px;
background: url(../img/icon_attention.svg) center center / contain no-repeat;
vertical-align: middle;
}

/*----------------------------------------
ページタイトル
----------------------------------------*/

/*ページタイトル(大・中・小共通)
--------------------------------------*/
.page-title {
line-height: 1.5;
}
.page-title__sub {
display: block;
color: var(--c_main);
font-family: "Zen Kaku Gothic New", sans-serif;
font-size: 20px;
letter-spacing: 0.2em;

}
.page-title__main {
display: block;
font-size: 30px;
letter-spacing: 0.2em;
}
@media (min-width: 768px) {
.page-title__sub {
font-size: 24px;
}
.page-title__main {
font-size: 48px;
}
}
/*ページヘッダー領域
--------------------------------------*/
/*大*/
.page-header-lg {
display: grid;
place-content: center;
height: calc(200/375*100vw);
padding: 0 20px;
background-position: center center;
background-size: cover;
text-align: center;
}
@media (min-width: 768px) {
.page-header-lg {
justify-content: start;
height: 400px;
padding: 0 50px;
text-align: left;
}
}
/*中*/
.page-header-md {
padding: 80px 20px;
background: var(--c_sub);
text-align: center;
}
.page-header-md__lead {
margin-top: 40px;
}
@media (min-width: 768px) {
.page-header-md {
padding: 100px 0;
}
.page-header-md__lead {
margin-top: 50px;
}
}
/*小*/
.page-header-sm {
padding: 70px 20px;
background: var(--c_sub);
text-align: center;
}

/*----------------------------------------
page-intro
----------------------------------------*/
.page-intro {
padding: 50px 0;
line-height: 1.8;
}
.page-intro__catch {
margin: -4px 0;
font-size: 22px;
}
.page-intro__txt {
margin-top: 40px;
}
@media (min-width: 768px) {
.page-intro{
padding: 80px 0;
}
.page-intro__catch {
margin: -14px 0;
text-align: center;
font-size: 36px;
}
}

/*----------------------------------------
cv-area
----------------------------------------*/
.cv-area {
padding: 50px 0;
background-image: linear-gradient(150deg, rgba(255, 250, 227, 1) 10%, rgba(254, 250, 193, 1) 90%);
color: var(--c_main);
text-align: center;
font-size: 14px;
}
.cv-area__txt {
margin-top: 40px;
}
.cv-area__btn {
max-width: 400px;
margin: 40px auto 0;
}
.cv-area p {
font-weight: 600;
}
@media (min-width: 768px) {
.cv-area {
padding: 80px 0;
font-size: 16px;
}

}

/*----------------------------------------
breadcrumb
----------------------------------------*/
.breadcrumb {
display: none;
}
@media screen and (min-width: 768px) {
.breadcrumb {
display: block;
padding: 15px 50px;
background: var(--c_light-gray);
}
.breadcrumb__list li{
display: inline-block;
font-size: 12px;
}
.breadcrumb__list li:not(:last-child)::after {
content: ""
display: inline-block;
width: 5px;
height: 5px;
margin: 0 3px;
border-top: 1px solid;
border-right: 1px solid;
transform: rotate(45deg);
}
}

/*----------------------------------------
見出し
----------------------------------------*/

/*大見出し
-----------------------------------*/
/*日本語メイン*/
.heading-lv2-ja {
text-align: center;
font-weight: bold;
line-height: 1.6;
margin-bottom: 20px;
}
.heading-lv2-ja::after {
content: ""
display: block;
width: 100px;
margin: 30px auto 0;
border-top: 1px solid var(--c_main);
}
.heading-lv2-ja__main {
color: var(--c_main);
display: block;
font-size: 28px;
}
.heading-lv2-ja__main__sub {
color: var(--c_main);
display: block;
font-size: 22px;
padding: 10px 26px;
}
.heading-lv2-ja__sub {
display: block;
margin-bottom: 0.5em;
font-size: 16px;
}
.heading-lv2-ja--white {
color: var(--c_white);
}
.heading-lv2-ja--white::after {
border-color: var(--c_white);
}
@media (min-width: 768px) {
.heading-lv2-ja__main {
font-size: 40px;
margin-bottom: 40px;
}
.heading-lv2-ja__sub {
font-size: 18px;
}
}

/*中見出し
-----------------------------------*/
.heading-lv3 {
font-size: 24px;
font-weight: bold;
line-height: 1.5;
}
.heading-lv3::after {
content: ""
display: block;
width: 50px;
margin-top: 20px;
border-top: 1px solid var(--c_main);
}
.heading-lv3--center {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.heading-lv3--green {
color: var(--c_main);
}
.heading-lv3--green::after {
border-color: var(--c_main);
}
@media (min-width: 768px) {
.heading-lv3 {
font-size: 28px;
}
}

/*小見出し
-----------------------------------*/
.heading-lv4 {
padding-left: 20px;
border-left: 2px solid var(--c_main);
font-size: 20px;
font-weight: bold;
line-height: 1.5;
}
.heading-lv4--white {
color: var(--c_white);
border-color: var(--c_white);
}
@media (min-width: 768px) {
.heading-lv4 {
font-size: 24px;
}
}

/*小見出し以下
-----------------------------------*/
.heading-lv5 {
color: var(--c_main);
font-size: 20px;
font-weight: bold;
line-height: 1.5;
}
.heading-lv6 {
font-size: 16px;
font-weight: bold;
line-height: 1.5;
}

/*----------------------------------------
グリッド
----------------------------------------*/
.grid {
display: grid;
gap: 30px 20px;
}
/*PC2カラム用*/
.grid--pc2col {
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 768px) {
.grid--pc2col {
max-width: none;
grid-template-columns: repeat(2,1fr);
}
.grid {
display: grid;
gap: 40px 50px;
}
}

/*----------------------------------------
item
----------------------------------------*/
.item {
display: block;
color: inherit;
text-decoration: none;
}
/*hover仕様*/
a.item:hover,
a.item:focus {
color: var(--c_main);
}
a.item:hover .item__image img,
a.item:focus .item__image img {
transform: scale(1.2);
}
/*画像（アスペクト比維持して表示）*/
.item__image {
overflow: hidden;
}
.item__image img {
width: 100%;
max-width: none; /*resetで一律max-width: 100%にしているので解除*/
aspect-ratio: 256 / 164;
object-fit: cover;
transition: 0.5s;
}
/*キャプション*/
.item__caption {
margin-top: 0.56em;
display: grid;
grid-template-columns: 15px 1fr;
align-items: baseline;
font-weight: bold;
}

/*説明テキスト*/
.item__description {
margin-top: 0.2em;
}
/*PC4カラムのSPレイアウトで配置された場合だけの指定*/
@media screen and (max-width: 767px) {
.grid--pc4col .item {
font-size: 14px;
}
}

/*----------------------------------------
card
----------------------------------------*/
.card {
/*ソースでサムネイルを後ろにしたので表示を逆順に変更*/
/* display: block; */
display: flex;
flex-direction: column-reverse;
/*border: 1px solid var(--c_gray);*/
box-shadow: 0px 0px 9px 1px rgba(0,0,0,0.07);
line-height: 1.5;
border-radius: 18px;
}

/*カードボディ部分*/
.card__body {
padding: 20px 26px 20px 26px;
background: #fff;
box-shadow: 0px 1px 15px 0px rgba(0, 0, 0, 0.35);
border-radius: 18px;
}
.card__title p{
color:var(--c_main);
padding: 0 0 0 10px;
}
@media (min-width: 768px) {
.card__body {
padding: 20px 34px 20px 34px;
height: auto;
min-height: 252px;
}
.card__title p{
padding: 0 0 0 20px;
}
}

.card__title {
display: flex;
font-size: 20px;
font-weight: 600;
height: 70px;
margin: 0;
padding: 0;
vertical-align: baseline;
align-items: center;
line-height: 1.2;
}

.card__text {
margin-top: 14px;
text-align: justify;
font-weight: 500;
}

/*----------------------------------------
装飾
----------------------------------------*/
/*ボックス（黄色）*/
.nayami-tp {
display: flex;
align-items: center;
}
.nayami {
display: block;
list-style: none;
padding: 0; /* パディングをリセット */
margin: 0; /* マージンをリセット */
align-items: center;
width: 100%;
font-size: 16px;
line-height: 1.4;
margin-bottom: 34px;
text-align: center;
}
.nayami-tp img{
padding: 6px;
}
.nayami-ex-img {
width: 30px;
}
.yellowb {
border: 3.4px solid #d6cb2d;
background: #fff;
font-weight: 500;
padding: 10px;
margin-bottom: 10px;
}
.marucontainer {
position: relative;
display: flex;
justify-content: center;
}
.maru {
display: flex;
position: absolute;
width: 120px;
height: 120px;
border-radius: 50%;
background-color: #fff;
overflow: hidden;
justify-content: center;
align-items: center;
margin: 0 auto;
top: 4px;
}
.maru img {
width: 70px;
height: auto;
object-fit: cover;
padding: 0 0 20px 0;
}
.school-box {
max-width: 1000px;
text-align: center;
padding: 40px 0;
margin: 20px 0;
margin-top: 80px; 
background: #fff;
border-radius: 18px;
}
.g-box .heading-lv2-ja__main span {
font-size: 24px;
background: linear-gradient(transparent 76%, #d6cb2d 76%);
}
.bg {
background: #efefef;
}
.y-border {
text-align: center;
font-weight: 500;
font-size: 21px;
border-bottom: 3.4px solid #d6cb2d;
margin-bottom: 10px;
display: inline;
}
.g-box {
text-align: center;
padding: 30px 10px;
marigin: auto;
background: #fff;
border: 3.4px solid var(--c_main);
border-radius: 18px;
}
.g-box ul {
font-weight: 600;
}
.white-box {
text-align: center;
padding: 20px;
marigin: auto;
background: #fff;
border-radius: 18px;
}
.white-box img{
padding: 10px;
}
.white-box p{
padding: 10px;
font-weight: 500;
text-align:justify;
}

.nayami-ex ul,ol{
font-size: 13px;
line-height: 2.2;
text-align: left;
}


.school__text {
margin: 20px 34px 40px 34px;
font-weight: 500;
text-align: justify;
}

.school__text ul {
    list-style: none;
}

.school__text li {
	text-indent: -1.4rem;
}
.school__text li::before {
    content: "•";
	color: var(--c_main);
    margin-right: 0.5rem;
	margin-left: 0.5rem;
}

@media (min-width: 768px) {
.white-box {
margin: auto;
padding: 28px;
width: 840px;
}
.nayami-tp {
display: flex;
gap: 20px 80px;
justify-content: center;
align-items: center;
}
.nayami-tp img{
width: 320px;
}
.nayami-ex-img {
width: 40px;
}
.nayami {
display: block;
list-style: none;
padding: 0;
margin: 0;
align-items: center;
width: 500px;
font-size: 24px;
margin-bottom: 34px;
}
.yellowb {
border: 3.4px solid #d6cb2d;
background: #fff;
padding: 10px;
margin-top: 30px;
margin-bottom: 30px;
}
.nayami-ex__container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
width: 90%;
margin: 0 auto;
}
.grid-item {
text-align: center;
padding: 10px 0 0 0;
}
.nayami-ex ul,ol{
font-size: 18px;
line-height: 2.2;
text-align: left;
}
.g-box .heading-lv2-ja__main span {
font-size: 34px;
background: linear-gradient(transparent 76%, #d6cb2d 76%);
}
.school__text {
margin: 20px 100px 40px 100px;
font-weight: 500;
text-align: justify;
}
}