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

@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&family=Varela+Round&display=swap');

* {box-sizing:border-box;}
a, a:after {-webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; outline:none;}
a {cursor:pointer;text-decoration: none;}
div,ol,ul,li,p,span,a {position:relative;}
ol,ul,li {list-style:none;list-style-type:none;padding:0;}
body,header,footer,menu,p,ul {padding:0;margin:0;}
h1,h2,h3,h4,h5,h6 {font-weight:normal;margin:0;padding: 0.5em 0; line-height:1em;font-family: 'Varela Round', 'Kosugi Maru', sans-serif;text-align: center;color: #00cb75;}
div,a,img,p,li {display:block;}
a:hover img {opacity:0.75;}
img {width: 100%;}

a.button {background: #00cb75;text-align: center;border-radius: 5px;color: #fff;}
a.button:hover {background: #0f9;color: #fff;}

h1 {font-size: 2.5rem;}
h2 {font-size: 2rem;}
h3 {font-size: 1.75rem;}
h4 {font-size: 2rem;}

ul.flex {display: flex;flex-wrap: wrap;align-items: center;}
ul.flex.twin li {flex-basis: 100%;}
ul.flex.layout2 li {flex-basis: 100%;}
ul.flex.layout2 li:first-of-type {flex-basis: 100%;}


body {background: #fff;color: #333;font-feature-settings: "palt", "swsh";}

header {}
header > div {width: 100%;max-width: 1100px;margin: 0 auto;padding:0.5rem 0.5rem 0;}
footer > div, section > div {width: 100%;max-width: 1100px;margin: 0 auto;padding: 1rem 0.5rem;}
section > div {padding: 2rem 0.5rem;}
header li.klogo {text-align: left;flex-basis: 50%;}
header li.iclogo {text-align: right;flex-basis: 50%;}
header li img {width: 80%;max-width: 200px;display: inline-block;}
header li.iclogo img {max-width: 150px;}

#wrapper {}
#content {}
section {}

#dist {background: #00cb75;}
#dist h1 {color: #fff;padding: 0;}

#hero {background: #eee;margin-bottom: 5rem;}
#hero ul.flex li img {width: 50%;min-width: 200px; margin: 0 auto;}
#hero ul.flex li h2 {line-height: 1.3;}
.redletter {color: red;font-weight: 600;}

#catch h2 {line-height: 1.3;}

.cart h5 {font-size: 2rem;}
.cart p.price {text-align: right;color: #00cb75;font-weight: 500;font-size: 1.5rem;padding-right: 1rem;font-family: 'Varela Round', 'Kosugi Maru', sans-serif;}
.cart p.price span.tax {font-size: 70%;}
.cart a.button {padding: 0.5em;font-size: 1.5rem;width: 90%;margin: 0.5em auto;}
.cart p.desc {padding: 2em;}
.cart p.feature {font-family: 'Kosugi Maru', sans-serif;color: #00cb75;font-size: 1.25rem;line-height: 1.4;padding-left: 1rem;}
.cart p.feature a {color: #00cb75;}
.cart p.feature a:hover {color: #f90;}
.cart p.feature a::after {content: "\8A73\3057\304F\306F\3053\3061\3089";font-size: 0.8rem;background: #00cb75;color: #fff;padding: 0.25rem;border-radius: 3px;vertical-align: middle;display: inline-block;}
.cart p.feature a:hover::after {background: #f90;}

.bis {color: #fff;}
.bis > div {background: rgba(0,200,115,0.5);border-radius: 10px;margin: 3rem auto;}
.bis p.ask {font-family: 'Kosugi Maru', sans-serif;font-size: 1.65rem;line-height: 1.5;text-align: center;}
.bis p.ask > span {background: #fff;color: #00cb75;padding: 0.5rem;border-radius: 5px;margin: 0 0.2rem 0.2rem;display: inline-block;line-height: 1;}
.bis p.com {width: 95%; margin: 2rem auto 0.3rem;font-size: 1.1rem;font-family: 'Varela Round', 'Kosugi Maru', sans-serif;border-bottom: 2px solid #fff;padding-bottom: 0.3rem;}
.bis p.inquiry {width: 95%; margin: 0 auto;}
.bis p.inquiry a {color: #fff;display: inline;}

#ambassador ul li {padding: 1rem;}
#ambassador ul li p {text-align: center;}
#ambassador ul li p.name {color: #00cb75;margin: 0.5rem 0;font-weight: 600;}
#ambassador p.comment {background: #dfe;width: 95%;margin: 0 auto 2rem;padding: 1rem;border-radius: 5px;color: #00cb75;font-size: 90%;}
#ambassador p.comment > span {display: block;text-align: right;}
#ambassador ul li#ske > img {width: 70%;margin: 0 auto;}

#karte ul li:last-of-type {padding: 1rem 0 0 0;}
#karte a {padding: 1rem;margin: 1rem auto;}

#medic {margin: 3rem auto;}
#medic p {margin: 1rem;}
#medic a {padding: 1rem;}

#pub ol {width: 100%;max-height: 8rem;height: auto;overflow-y: scroll;}
#pub ol li {border-bottom: 1px dashed #ccc;margin-bottom: 0.5rem;padding: 0.5rem;transition: all ease 0.4s;height: 2.5rem;overflow: hidden;display: flex;}
#pub ol li span {}
#pub ol li span a {color: #333;display: inline;}
#pub ol li span a:hover {color: #007543;}
#pub ol li span.date {padding-right: 1rem;min-width: 6rem;width: 10%;}
#pub ol li span.title {text-overflow: ellipsis;white-space: nowrap;width: 90%;overflow: hidden;}
#pub ol li:hover {background: #dfe;}
#pub ol::-webkit-scrollbar {width: 6px;}
#pub ol::-webkit-scrollbar-track {border-radius: 6px;background: #eee;}
#pub ol::-webkit-scrollbar-thumb {background-color: rgba(0, 50, 0, 0.5);border-radius: 6px;box-shadow:0 0 0 1px rgba(255, 255, 255, 0.3);}

h3#pcr {background-color: #f00;color: #fff;padding: 0.5em;line-height: 1.3;width: 90%;margin: 0 auto;border-radius: 5px;}

p.annotation {font-size: 0.8rem;color: #666;margin: 2rem;}

.video {width: 100%;}
.youtube{position: relative;padding-bottom: 56.25%;height: 0;overflow: hidden;}
.youtube iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

/*フッター*/
footer {background-color:#222;color:rgba(255,255,255,0.6);width:100%;border-top:1px solid rgba(0,0,0,0.3);}
footer div {padding:20px 0;}
p.copyright {font-weight:400;font-size:0.75em;text-align:center;line-height:2em;}
footer a {color:rgba(255,255,255,0.6);}

/*ページトップへ*/
.pagetop {display: block;position: fixed;right: 5px;bottom: 5px;z-index:+20;}
.pagetop a {display: block;background-color: rgba(0,200,115,0.3);color: rgba(255,255,255,0.5); text-align: center;text-decoration: none;outline:none;width: 50px;height: 50px;line-height: 50px;font-size: 30px;border-radius: 50%;/*transform:rotate(45deg);*/}
.pagetop a i {/*transform:rotate(-45deg);*/}
.pagetop a:hover {color:rgba(255,255,255,1);}

/*汎用*/
.mincho {font-family: "游明朝", "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;}
.serif {font-family:  "Times New Roman", Times, serif, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝";}
.gothic {font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
.txtwshadow {text-shadow:1px 1px 0.1em #000,-1px 1px 0.1em #000,-1px -1px 0.1em #000,1px -1px 0.1em #000;}
.clearfix:after, ul:after {content:"";display:block;position:relative;clear:both;}
.sphide {display: none;}
.spshow {display: block;}

@media screen and (min-width: 660px) {
	/*h1,h2,h3,h4,h5,h6 {text-align: center;}*/
	ul.flex.twin li {flex-basis: 50%;}
	ul.flex.layout2 li {flex-basis: 70%;}
	ul.flex.layout2 li:first-of-type {flex-basis: 30%;}
	#karte ul li:last-of-type {padding: 0 0 0 2rem;}
	.sphide {display: block;}
	.spshow {display: none;}
	h1 {font-size: 3rem;}
	h2 {font-size: 2.5rem;}
	h3 {font-size: 2.5rem;}
	h4 {font-size: 2rem;}
	.cart p.feature {font-size: 1.5rem;}
	.bis p.ask {font-size: 2rem;}
	.bis p.com {font-size: 1.25rem;}
}

/*750 920 1200 1500*/