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

.koinomoto {
    letter-spacing: 0.5px;
    font-family: "Noto Sans JP", "Roboto", "Hiragino Kaku Gothic ProN", sans-serif;

}
.mv {
    width: 100%;
    line-height: 0;
}
.mv img {
    width: 100%;
    height: auto;
}
@media screen and (min-width: 1200px) {
    .mv {
        background: #000;
        text-align: center;
    }
    .mv img {
        max-width: 1200px;
    }
}

/*kttl*/
.kttl02 {
    width: 100%;
    max-width: 750px;
    margin: 0 auto 1em auto;
}
.kttl02 img {
    width: 100%;
    height: auto;
}
.kttl03 {
  position: relative;
  font-size: 22px;
  padding-left: 1.5rem;
  margin-bottom: 1em;
  line-height: 1;
}
.kttl03::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background-color: #000;
}
.kttl03a {
    font-family: "Noto Serif JP", "Yu Mincho", serif;
    text-align: center;
    font-size: 24px;
    line-height: 1.2em;
    font-kerning: normal;
    letter-spacing: 0;
    margin-bottom: .5em;
}
.kttl03b {
    font-family: "Noto Serif JP", "Yu Mincho", serif;
    background-color:rgba(255,255,255,0.7);
    text-align: center;
    font-size: 20px;
    line-height: 1.2em;
    padding: .5em 0;
    margin: 0 auto 1em auto;
}
.kttl03c {
    background-color: #01437c;
    padding: 10px 0;
    text-align: center;
    color: #FFF;
    font-size: 22px;
}
.kttl03d {
    font-size: 20px;
    position: relative;
    margin-bottom: 1em;
    text-align: center;
}
.kttl03d::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 3px;
  margin: .45em auto 0; /* autoで中央寄せ */
  background: currentColor;
  border-radius: 2px;
}
.kttl03e {
    background-color: #d14939;
    padding: 10px 0;
    text-align: center;
    color: #FFF;
    font-size: 22px;
}
.kttl03f {
    background-color: #58762a;
    padding: 10px;
    color: #FFF;
    font-size: 16px;
    line-height: 1.4em;
    letter-spacing: 0;
}
.kttl03g {
    background-color: #ffca00;
    padding: 10px 0;
    text-align: center;
    color: #000;
    font-size: 22px;
}
@media screen and (min-width: 1024px) {
    .kttl02 {
        margin: 0 auto 3em auto;
    }
    .kttl03 {
      font-size: 30px;
      /*margin-bottom: 1.5em;*/
    }
    .kttl03a {
        font-size: 38px;
        line-height: 1.2em;
        margin-bottom: 1.5em;
    }
    .kttl03b {
        font-size: 30px;
        margin: 0 auto 2em auto;
    }
    .kttl03c,
    .kttl03e,
    .kttl03g {
        padding: 10px 0;
        font-size: 30px;
    }
    .kttl03d {
        font-size: 26px;
    }
    .kttl03f {
        padding: 10px 20px;
        font-size: 30px;
    }
}

/*beginning*/
.beginning {
    background-image: url("../img/koinomoto/beginning_image_sp.png"),url("../img/koinomoto/beginning_bg.png");
    background-position: center bottom,center bottom;
    background-size: 90%,cover;
    background-repeat: no-repeat,no-repeat;
    height: 380px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    line-height: 1.8;
    font-family: "Noto Serif JP", "Yu Mincho", serif;
    letter-spacing: 0.1em;
    padding: 1em;
    font-weight: bold;
    display: flex;
    align-items: center;
}
.beginning p {
    margin: 2em 1em 0 0;
}
@media screen and (min-width: 768px) {
    .beginning {
        background-image: url("../img/koinomoto/beginning_image1.png"),url("../img/koinomoto/beginning_image2.png"),url("../img/koinomoto/beginning_bg.png");
        background-position: right bottom,3em center,center bottom;
        background-size: 380px,200px,cover;
        height: 320px;
    }
    .beginning div {
        margin-right: 100px;
    }
}
@media screen and (min-width: 1024px) {
    .beginning {
        background-size: 520px,200px,cover;
        height: 340px;
    }
    .beginning p {
        font-size: 2.0rem;
    }
    .beginning div {
        margin-right: 200px;
    }
}
@media screen and (min-width: 1200px) {
    .beginning {
        background-position: 88% bottom,7em center,center bottom;
        background-size: 790px,300px,cover;
        height: 500px;
    }
    .beginning p {
        font-size: 2.4rem;
    }
    .beginning div {
        margin-right: 400px;
    }
}

/*cm*/
.cm {
    background: url(../img/koinomoto/cm_bg.png) no-repeat;
    background-size: cover;
    background-position: center bottom;
    padding: 2em 0 3em 0;
}
.cm h2 {
    background: url(../img/koinomoto/cm_h2_bg.png) no-repeat;
    background-size: 80%;
    background-position: center center;
    padding: 0.5em 1em;
    font-size: 30px;
    font-family: "Noto Serif JP", "Yu Mincho", serif;
    margin: 0 auto;
    display: flex;
    width: 100px;
    justify-content: center;
}
.cm .cm_box {
    padding: 0 5%;
    width: 90%;
    max-width: 600px;
    margin: 0 auto;
}
.youtube_wrap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin-bottom: 2em;
}
.youtube_wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.btn_music {
    width: 60%;
    max-width: 300px;
    margin: 0 auto;
}
.btn_music img {
    width: 100%;
    height: auto;
}
@media screen and (min-width: 768px) {
    .cm h2 {
        background-size: 80%;
        background-position: center center;
        padding: 0.5em 1em;
        font-size: 40px;
        margin: 0 auto;
        display: flex;
        width: 180px;
        justify-content: center;
    }
}
@media screen and (min-width: 1024px) {
    .cm {
        padding: 2em 0 5em 0;
    }
    .cm h2 {
        font-size: 52px;
    }
    .cm .cm_box {
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-content: center;
        align-items: center;
        max-width: 1200px; 
        margin: 0 auto;
    }
    .btn_music {
        width: 70%;
        max-width: 400px;
        margin: 0 auto;
    }
}

/*campaign*/
.campaign {
    background: url("../img/koinomoto/Cloud.png"),url(../img/koinomoto/section_common_bg.png);
    background-repeat: no-repeat,repeat-y;
    background-size: 100% auto;
    padding: 2em 5%;
    width: 90%;
}
.page_link {
    margin: 0 auto 2em auto;
}
.page_link li {
    margin-bottom: 3px;
}
.page_link li img {
    width: 100%;
    height: auto;
}
@media screen and (min-width: 768px) {
    .page_link {
        width: 82%;
        margin: 0 auto 2em auto;
    }
}
@media screen and (min-width: 1024px) {
    .page_link {
        display: flex;
        max-width: 1400px;
        margin: 0 auto 4em auto;
    }
    .page_link li {
        width: 31%;
    }
}

.font_red1 {
    color: #d14939;
    font-weight: bold;
    font-size: 1.4em;
}
.campaign_box {
    margin-bottom: 2em;
}
.campaign_box .text {
    margin-bottom: 1.5em;
}
.campaign_box .text p {
    text-align: center;
}
.campaign  .cmsong_title {
    font-family: "Noto Serif JP", "Yu Mincho", serif;
    font-size: 28px;
    text-align: center;
    letter-spacing: 0;
    line-height: 1.0em;
}
.campaign .koinomotp_bn {
    width: 100%;
    max-width: 600px;
    margin: 0 auto 1em auto;
}
.campaign .koinomotp_bn img {
    width: 100%;
    height: auto;
}
.campaign .profile {
    padding: 0 5%;
    margin-bottom: 2em;
}
.campaign .profile .image {
    width: 60%;
    max-width: 300px;
    margin: 0 auto 1em auto;
}
.campaign .profile .image img {
    width: 100%;
    height: auto;
}
.campaign .profile h4 {
    font-size: 26px;
    font-family: "Noto Serif JP", "Yu Mincho", serif;
    margin-bottom: 0.5em;
}
.campaign .profile h4 span {
    font-size: 15px;
}
.campaign .koinomoto_x {
    width: auto;
    max-width: 560px;
    /*background: url("../img/koinomoto/koinomoto_x_bg.png") no-repeat;*/
    background-color:rgba(255,255,255,0.7);
    background-size: cover;
    border-radius: 10px;
    font-size: 14px;
    padding: 20px;
    /*margin: 0 auto 2em auto;*/
    margin: 0 auto;
}
.campaign .koinomoto_x_wrap {
    width: auto;
    max-width: 560px;
    margin: 0 auto 2em auto;
}
.campaign .koinomoto_x .logo {
    width: 80px;
    margin: 1em auto 0 auto;
}
.campaign .koinomoto_x .logo img {
    width: 100%;
    height: auto;
}
@media screen and (min-width: 768px) {
    .campaign_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 90%;
        max-width: 900px;
        margin: 0 auto 3em auto;
    }
    .campaign_box .text {
        width: 60%;
    }
    .campaign_box .text p {
        text-align: left;
    }
}
@media screen and (min-width: 1024px) {
    .outline {
        max-width: 1200px;
        margin: 0 auto;
    }
    .campaign .koinomotp_bn {
        max-width: 900px;
        margin: 0 auto 2em auto;
    }
    .campaign .profile {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 0;
        margin-bottom: 3em;
    }
    .campaign .profile .image {
        width: 34%;
        margin: 0;
    }
    .campaign .profile .text {
        width: 60%;
    }
    .campaign .koinomoto_x {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 840px;
        padding: 30px;
        font-size: 20px;
        /*margin: 0 auto 4em auto;*/
        margin: 0 auto;
    }
    .campaign .koinomoto_x_wrap {
        max-width: 840px;
        margin: 0 auto 4em auto;
    }
    .campaign .koinomoto_x .logo {
        width: 30%;
        margin-left: 35px;
    }
    .campaign_box {
        margin-bottom: 4em;
    }
    .campaign_box .text p {
        font-size: 20px;
    }
}
@media screen and (min-width: 1200px) {
    .campaign .profile .image {
        width: 45%;
        max-width: 500px;
    } 
    .campaign .profile .text {
        width: 50%;
    }
    .campaign .profile h4 {
        font-size: 40px;
        margin-bottom: 1em;
    }
    .campaign .profile h4 span {
        font-size: 30px;
    }
    .campaign .profile .text p {
        line-height: 2.0em;
    }
}
.kikan {
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}
.kikan img {
    width: 100%;
    height: auto;
}
@media screen and (min-width: 768px) {
    .kikan {
        font-size: 30px;
    }
}
@media screen and (min-width: 1200px) {
     .kikan br {
        display: none;
    }   
}

/*overview_box*/
.overview_box {
    background-color:rgba(255,255,255,0.6);
    margin-bottom: 1.5em;
}
.ove_outline {
    padding: 1em;
}
@media screen and (min-width: 768px) {
    .overview_box {
        margin-bottom: 2em;
    }
    .ove_outline {
        padding: 2em;
    }
}
@media screen and (min-width: 1024px) {
    .overview_box {
        margin-bottom: 3em;
    }
    .ove_outline {
        padding: 3em;
    }
}
.ove_outline .ktxt_center {
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 1em;
}
.ove_outline .step {
    background: #58762a;
    color: #FFF;
    font-weight: bold;
    display: inline-block;
    padding: 0.2em 1em;
    border-radius: 30px;
    margin-bottom: 10px;
}
.ove_outline .image1 {
    width: 80%;
    margin: 0 auto 2em auto;
}
.ove_outline .image1 img {
    width: 100%;
    height: auto;
}
.ove_outline .step2_list01 {
    background: url("../img/koinomoto/no01.png") no-repeat;
    background-size: 30px auto;
    background-position: left top;
    padding-left: 40px;
    letter-spacing: 0;
    font-size: 14px;
    margin-bottom: 1em;
}
.ove_outline .step2_list02 {
    background: url("../img/koinomoto/no02.png") no-repeat;
    background-size: 30px auto;
    background-position: left top;
    padding-left: 40px;
    letter-spacing: 0;
    font-size: 14px;
    margin-bottom: 1em;
}
.kome li {
	position: relative;
	padding-left: 20px;
    font-size: 0.8em;
    letter-spacing: 0;
}
.kome li:before {
	position: absolute;
	left: 0;
	content: "※";
}
@media screen and (min-width: 768px) {
    .ove_outline .houhou {
        width: 85%;
        margin: 0 auto;
    }
}
@media screen and (min-width: 1024px) {
    .ove_outline .ktxt_center {
        font-size: 26px;
        margin-bottom: 2em;
    }
    .houhou_box {
        display: flex;
        justify-content: space-between;
    }
/*    .houhou_box div {
        width: 48%;
    }*/
    .ove_outline .houhou .step1 {
        width: 50%;
        margin: 0 auto;
    }
    .ove_outline .image1 {
        width: 100%;
        margin: 0 auto 2em auto;
    }
    .ove_outline .houhou {
        width: 90%;
        display: flex;
        justify-content: space-between;
        padding: 0;
        margin: 0 auto;
    }
    .ove_outline .houhou .step1,
    .ove_outline .houhou .step2 {
        width: 46%;
    }
}
@media screen and (min-width: 1200px) {
/*    .ove_outline .houhou {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }*/
/*    .ove_outline .houhou .step1 {
        width: 60%;
        margin-right: 5%;
    }*/
}


.prize_image {
    width: 70%;
    max-width: 500px;
    margin: 0 auto 1em auto;
}
.prize_image img {
    width: 100%;
    height: auto;
}
.prize_txt1 {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 0.6em;
}
.prize_txt2 {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 0.6em;
}
.font_ss {
    font-size: 0.8em;
}
@media screen and (min-width: 1024px) {
    .prize_txt1 {
        font-size: 26px;
        margin-bottom: 1em;
    }
    .prize_txt2 {
        font-size: 18px;
        margin-bottom: 1em;
    }
}

.scroll_box {
    width: auto;
    height: 300px;
    border: 1px solid #b8b8b8;
    padding: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #f9f9f9;
}

/* スクロールバーを少しスタイリッシュに（対応ブラウザのみ） */
.scroll_box::-webkit-scrollbar {
    width: 8px;
}
.scroll_box::-webkit-scrollbar-thumb {
    background-color: #999;
    border-radius: 4px;
}
.scroll_box::-webkit-scrollbar-thumb:hover {
    background-color: #666;
}



/* スクロールボックス本体 */
:root {
  --bg: #fafafa;
  --card: #ffffff;
  --text: #222;
  --muted: #666;
  --brand: #c2002f; /* にんべん系の赤イメージ */
  --border: #e6e6e6;a
  --radius: 16px;
}
.terms-box {
  max-height: 320px;
  overflow-y: auto;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px);
  background: #fff;
  font-size: 0.8em;
}

/* 見出しや本文の整形 */
.terms-box h2 {
  font-size: 16px;
  margin: 1.6em 0 .5em;
  border-left: 4px solid var(--brand);
  padding-left: .6em;
  line-height: 1.4;
}
.terms-box p { margin: .8em 0; }
.terms-box ul { padding-left: 1.4em; margin: .6em 0; }
.terms-box li { margin: .25em 0; }
.terms-box a { color: var(--brand); text-decoration: underline; }

/* 目次（任意） */
.toc { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 16px; font-size: .95rem; }
.toc a { color: var(--brand); text-decoration: none; border-bottom: 1px dashed var(--brand); }

/* スクロールバー（対応ブラウザ） */
.terms-box::-webkit-scrollbar { width: 10px; }
.terms-box::-webkit-scrollbar-thumb { background: #d7d7d7; border-radius: 999px; }
.terms-box:hover::-webkit-scrollbar-thumb { background: #c9c9c9; }
.terms-box ul, .terms-box ol {
list-style: revert;
margin-left: 1.25em;
}
@media screen and (min-width: 1024px) {
    .terms-box {
      max-height: 420px;
    }
}

/*table*/
.contact-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.6;
}
.contact-table th,
.contact-table td {
  border: 1px solid #ccc;
  padding: 12px 16px;
  vertical-align: top;
}
.contact-table th {
  background-color: #f2f0eb; /* 画像のような淡いグレー */
  width: 20%;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.contact-table td {
  background-color: #fff;
}
.contact-table a {
  color: #000;
  text-decoration: none;
}
.contact-table a:hover {
  text-decoration: underline;
}
.contact-table small {
  color: #555;
  font-size: 12px;
}
@media screen and (min-width: 1024px) {
    .contact-table {
      font-size: 18px;
    }
}


/*tour*/
.tour {
    background: url("../img/koinomoto/Cloud.png"),url(../img/koinomoto/section_common_bg.png);
    background-repeat: no-repeat,repeat-y;
    background-size: 100% auto;
    padding: 2em 5%;
    width: 90%; 
}
.tour_box {
    max-width: 700px;
    margin: 0 auto 2em auto;
}
.tour_box h4 {
    font-family: "Noto Serif JP", "Yu Mincho", serif;
    text-align: center;
    font-size: 20px;
}
.tour_copy {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 1em;
}
.tour_copy span {
    font-size: 24px;
    color: #da0000;
    font-weight: bold;
}
.tour_text {
    margin-bottom: 1em;
}
.tour_image1 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 1em;
    line-height: 0;
}
.tour_image1 li {
    width: 49.5%;
    margin-bottom: 0.5%;
}
.tour_image1 li img {
    width: 100%;
    height: auto;
}
.tour_image2 {
    width: 100%;
    margin: 0 auto;
}
.tour_image2 img {
    width: 100%;
    height: auto;
}
@media screen and (min-width: 768px) {
    .tour_image1 li {
        margin-bottom: 0.8%;
    }
}
@media screen and (min-width: 1024px) {
    .tour_box h4 {
        font-size: 35px;
    }
    .tour_copy {
        font-size: 24px;
        line-height: 1.2;
        margin-bottom: 1.5em;
    }
    .tour_copy span {
        font-size: 45px;
    }
    .tour_text {
        text-align: center;
        margin-bottom: 1.5em;
        font-size: 20px;
    }
    .tour_image1,
    .tour_image2 {
        max-width: 850px;
        margin: 0 auto 3em auto;
    }
}

.staff_list {
    background: #FFF;
    padding: 1em 1em 1em 2em;
    margin-bottom: 2em;
    list-style: revert;
}
.staff_list li {
    margin: .30em 0;
    padding-left: 0;
    line-height: 1.4em;
    font-size: .8em;
}
@media screen and (min-width: 768px) {
    .staff_list {
        padding: 1.5em 1.5em 1.5em 2.5em;
    }
}
@media screen and (min-width: 1024px) {
    .staff_list {
        padding: 2em 2em 2em 3em;
        font-size: 16px;
    }
    .staff_list li {
        font-size: 1em;
    }
}

/*recipe*/
.recipe {
    background: url("../img/koinomoto/Cloud.png"),url(../img/koinomoto/section_common_bg.png);
    background-repeat: no-repeat,repeat-y;
    background-size: 100% auto;
    padding: 2em 5%;
    width: 90%; 
    margin-bottom: 2em;
}
.recipe_text {
    font-size: 18px;
    margin-bottom: 1em;
}
.recipe_copy {
    color: #58762a;
    line-height: 1.4em;
    font-weight: bold;
    margin-bottom: 1.5em;
}
.recipe_box2 {
    margin-bottom: 2em;
}
.recipe_box2 .image {
    width: 100%;
    max-width: 400px;
    margin: 0 auto 2em auto;
}
.recipe_box2 .image img {
    width: 100%;
    height: auto;
}
.recipe_box2 .recipe_time {
    display: inline-block;
    background: #58762a;
    color: #FFF;
    font-weight: bold;
    padding: .5em 1.5em;
    font-size: 15px;
    border-radius: 20px;
    margin-bottom: 1em;
}
.recipe_box2 .person {
    margin-bottom: 0.5em;
}
.recipe-list {
  padding: 0;
  margin: 0;
}

.recipe-list li {
  display: flex;
  justify-content: space-between;
  padding: .5em 0;
  border-bottom: 1px dotted #ccc;
}
.recipe-list .name {
  text-align: left;
}
.recipe-list .amount {
  text-align: right;
  min-width: 4em;
}
.recipe_pro {
    width: 100%;
    counter-reset: step;
}
.recipe_pro dt {
    color: #58762a;
    font-weight: bold;
    font-size: 20px;
    margin-bottom: .8em;
}
.recipe_pro dd {
    position: relative;
    margin-left: 2em;
    padding-left: 1em;
    counter-increment: step;
    margin-bottom: .8em;
}
.recipe_pro dd::before {
    content: counter(step);
    position: absolute;
    left: -1.8em;
    top: 0.1em;
    width: 1.5em;
    height: 1.5em;
    background: #58762a;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 1.5em;
    font-size: 0.9em;
    font-weight: bold;
}
@media screen and (min-width: 1024px) {
    .recipe_text {
        font-size: 20px;
        margin-bottom: 2em;
        text-align: center;
    }
    .recipe-list_box {
        display: flex;
        justify-content: space-between;
    }
    .recipe-list_box ul {
        width: 48%;
    }
    .recipe-list {
      border-top: 1px dotted #ccc;
    }
    .recipe_copy {
        font-size: 20px;
    }
    .recipe_pro dt {
        font-size: 26px;
        margin-bottom: .8em;
    }
    .recipe_pro dd {
        font-size: 18px;
        margin-bottom: 1em;
    }
}
@media screen and (min-width: 1200px) {
    .recipe_box2 {
        display: flex;
    }
    .recipe_box2 .image {
        width: 45%;
        margin: 0 3em 0 0;
    }
    .recipe_box2 .text {
        width: 100%;
    }
}
.mail_img {
  vertical-align: middle;
  width: 100%;
  max-width: 254px;
  height: auto;
}
.sns_img {
  vertical-align: middle;
}

.bottom-buttons {
  display: flex;
  justify-content: center;
  gap: 2em;
  margin: 3em 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  background-color: #b5a300; /* 黄土色系 */
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: .8em;
  padding: 1em 2em;
  border-radius: 2px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}
.btn:hover {
  background-color: #c4b200;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}
.btn span {
  font-size: 1.2em;
  line-height: 1;
}
.btn:link,
.btn:visited {
  background-color: #c4b200;
  color: #fff;
  transform: translateY(-2px);
  text-decoration: none;
}

@media screen and (min-width: 768px) {
    .btn {
        font-size: 1.6em;
        padding: 1em 2em;
    }
}
.marker {
  --marker: #ffeb66;
  --spread: .55em;
  background: linear-gradient(transparent 55%, var(--marker) 55% 90%, transparent 90%);
  padding: 0 .15em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  text-shadow:
    .02em 0 var(--marker),
    -.02em 0 var(--marker);
}
.cp-end {
    text-align: left; 
}
.cp-end span {
    display: inline-block;
    font-size: 20px;
    color: #FFF;
    font-weight: bold;
    line-height: 1.5;
    border: 4px solid #D14939;
    background: #D14939;
    border-radius: 20px;
    padding: 10px 20px;
    transform: rotate(-5deg);
    /*box-shadow: 0 0 5px rgba(187, 0, 0, 0.5); */
}
@media screen and (min-width: 768px) {
    .cp-end span {
        font-size: 24px;
    }
}

.tousen {
    background: #FFF;
    padding: 1em;
}
.tousen .midashi {
    width: 80%;
    max-width: 480px;
    margin: 0 auto 1em auto;
}
.tousen .midashi img {
    width: 100%;
    height: auto;
}
.tousen table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ffca00;
  box-sizing: border-box;
  background: #FFF;
  font-size: 14px;
  line-height: 1.6;
}
.tousen table tr:nth-child(even) {
    background: #fff3c6;
}
.tousen table th,
.tousen table td {
    display: block;
    padding: 0.8em;
}
.tousen_txt1 {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 1em;
}
@media screen and (min-width: 768px) {
    .tousen {
        background: #FFF;
        padding: 2.5em;
    }
    .tousen table th,
    .tousen table td {
        display: table-cell;
        padding: 1.4em;
    }
    .tousen table th {
        width: 31%;
    }
}
@media screen and (min-width: 1024px) {
    .tousen table th,
    .tousen table td {
        padding: 0.9em;
    }
    .tousen table th,
    .tousen table td {
        font-size: 1.8rem;
    }
    .tousen_txt1 {
        font-size: 24px;
        margin-bottom: 1em;
        text-align: center;
    }
}