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

:root{--green:#064c3d;--accent:#c89b28;--pale:#f6f4ee;--mint:#eef5ef;--text:#183f38}
*{box-sizing:border-box;}
h1{font-size:56px;margin:0;line-height:1.25}
.lead{font-size:28px;margin:0 0 14px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:38px;padding:34px 0;border-bottom:1px solid #eee}
h2{font-size:28px;line-height:1.35;margin:0 0 14px;border-left:4px solid var(--accent);padding-left:18px}
.panel{background:var(--pale);padding:30px;text-align:center}
.em{color:#07845f;font-weight:700}
.patternbox{background:var(--pale);padding:20px;text-align:center}
.pattern-title{font-size:21px;font-weight:700;margin-bottom:12px}
.reactions{display:grid;grid-template-columns:1fr 160px 1fr;grid-template-rows:repeat(3,auto);gap:12px;align-items:center}
.reactions img{width:160px;height:160px;object-fit:cover;grid-column:2;grid-row:1/4;align-self:center}
.bubble{border:1.5px solid #b7b7b7;border-radius:999px;padding:9px 8px;background:#fff;font-weight:700;line-height:1.35}
.fact{background:#edf5ef;border-radius:6px;padding:13px 18px;font-weight:700;margin:18px 0}
@media(max-width:760px)
{
h1{font-size:40px}
.lead{font-size:22px}
.grid{grid-template-columns:1fr}
.reactions{grid-template-columns:1fr 130px 1fr}
.reactions img{width:130px;height:130px}
}

/*追加記述*/
#about { margin:70px auto 0; text-align:left; color:var(--text); font-size:16px; font-family:"Yu Mincho","Hiragino Mincho ProN",serif; line-height:1.8; background:#fff;}
#about section.hero > div,
#about section.grid,
#about section.end_section > div { max-width:1180px; margin:0 auto; padding:34px 28px;}

#about section.hero { background:url(../img/main-bg.jpg) right bottom no-repeat; background-size:cover;}
#about section.hero > div.grid-main { display:grid; grid-template-columns:1fr 280px; gap:40px;}
#about section.hero > div.grid-main > div:nth-of-type(2) { padding-top:3.0em;}
#about section.hero > div.grid-main > div:nth-of-type(2) h2 { display:inline-block; margin:0 auto; border-left:none; padding-left:0;}
#about section.hero > div.grid-main > div:nth-of-type(2) p { display:inline-block; margin:0 auto; border-left:none; padding-left:0;}
#about section.hero > div.grid-main > div:nth-of-type(3) { max-width:680px; grid-column:span 2;}
#about section.hero .badges { display:flex; gap:28px; flex-wrap:wrap; background:#FFFFFF; padding:15px 22px; margin-top:18px; font-family: sans-serif; font-weight:700;}
#about section.hero .badges span { display:inline-block; vertical-align:middle;}
#about section.hero .badges span:before { display:inline-block; vertical-align:middle; width:45px; height:32px; content:""; background:center left no-repeat;}
#about section.hero .badges span:nth-of-type(1):before { background-image:url(../img/main-icon01.jpg);}
#about section.hero .badges span:nth-of-type(2):before { background-image:url(../img/main-icon02.jpg);}
#about section.hero .badges span:nth-of-type(3):before { background-image:url(../img/main-icon03.jpg);}
#about section.hero .badges span:nth-of-type(4):before { background-image:url(../img/main-icon04.jpg);}

#about section.grid > div:first-of-type p,
#about section.grid > div:first-of-type .fact { margin-left:1.5em;}
#about section.grid .panel h3{ font-size:24px;}
#about section.grid .panel h3:last-of-type:after { display:block; width:auto; height:2px; margin:1.0em auto; background:url(../img/liner.gif) center center no-repeat; content:"";}
#about section.grid .panel p.arrow { position:relative; width:14px; height:16px; margin:15px auto; background-color:#E5A119;}
#about section.grid .panel p.arrow:before { position:absolute; top:-15px; left:-7px; display:block; width:30px; height:16px; margin:0 auto; background-color:#E5A119; content:"";clip-path:polygon(50% 0/*, 100% 0*/, 0 100%, 100% 100%);}
#about section.grid .panel p.arrow:after { position:absolute; bottom:-15px; left:-7px; display:block; width:30px; height:16px; margin:0 auto; background-color:#E5A119; content:"";clip-path:polygon(0 0, 100% 0/*, 0 100%*/, 50% 100%);}
#about section.end_section { background:var(--green); color:#fff; text-align:center; padding:34px 20px;}
#about section.end_section h2 { border:0; padding:0; font-weight:400;}
#about section.end_section h2:last-of-type:before { display:block; width:60px; height:2px; margin:1.0em auto; background:url(../img/liner.gif) center center no-repeat; content:"";}
#about section.end_section h2:last-of-type + p:before { display:block; width:100%; max-width:480px; height:1px; margin:2.0em auto; background:#FFFFFF; content:"";}
#about section.end_section h2:last-of-type + p br { display:none;}

.bubble:nth-of-type(1){ border-color:#FF00CC; color:#FF00CC;}
.bubble:nth-of-type(2){ border-color:#0066FF; color:#0066FF;}
.bubble:nth-of-type(3){ border-color:#999999; color:#666666;}
.bubble:nth-of-type(4){ border-color:#993300; color:#993300;}
.bubble:nth-of-type(5){ border-color:#FF0000; color:#FF0000;}
.bubble:nth-of-type(6){ border-color:#9900FF; color:#9900FF;}
.fact { position:relative; padding-left:70px;}
.fact:before { position:absolute; top:50%; left:15px; transform:translateY(-50%); width:46px; height:46px; content:""; background:url(../img/kimono-icon.jpg) center left no-repeat;}
@media(max-width:760px)
{
#about section.hero > div,
#about section.grid,
#about section.end_section > div { padding:34px 20px;}
#about section.hero > div.grid-main { grid-template-columns:1fr;}
#about section.hero > div.grid-main > div:nth-of-type(2) { padding-top:0;}
#about section.hero > div.grid-main > div:nth-of-type(3) { grid-column:auto;}
}
@media all and (max-width:719px)
{
#about { margin:52px auto 0;}
}
@media all and (max-width:559px)
{
.reactions { grid-template-columns:1fr 1fr; grid-template-rows:repeat(2,auto);}
.reactions img { width:200px;height:200px; margin:0 auto; grid-column:span 2;}
}
@media all and (max-width:479px)
{
#about section.end_section h2:last-of-type + p br { display:inline;}
.fact br { display:none;}
}
@media all and (max-width:419px)
{
#about section.hero .badges { gap:20px; padding:15px 10px;}
#about section.hero .badges span:before { width:37px; height:26px; background-size:32px 26px;}
}
@media all and (max-width:399px)
{
.reactions { grid-template-columns:1fr; grid-template-rows:auto;}
.reactions img { grid-column:auto;}
}