@charset "UTF-8";

@font-face {
    font-family: "chiarob";
    src: url(../font/tamamusubi-ChiaroStd-B.otf) format('opentype');
}
*{
    box-sizing: border-box
}
html {
    scroll-behavior: smooth;
    scrollbar-gutter: stable; /* モーダル表示時のスクロールバー消失によるずれ防止（Windows対策） */
}
body {
    font-family: "chiarob", sans-serif !important;
    font-style: normal;
    color: #393939;
    text-align: center;
    margin: 0;
    line-break: anywhere;
    word-wrap: break-word;
 }
 .sitewrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    background-image: url(../images/mission_bg.png);
    background-repeat: repeat-y;
    background-position: center;
    background-size: contain;
 }
 header {
    position: fixed;
    width: 100%;
    height: 88px;
    background: #F3F7F9;
    z-index: 10;
 }
 main {
    flex: 1;
    overflow-x: hidden;
    padding-bottom: 64px;
 }
.inner {
    max-width: 1280px;
    width: 373px;
    margin: 0 auto;
}
.page-anchor {
    display: flex;
    align-items: center;
    color: #8A8988;
    text-decoration: none;
    outline: none;
}
img{
    max-width: auto;
    width:auto;
    height: auto;
    vertical-align: bottom;
}
.section-container {
    display: flex;
    justify-content: space-between;
    text-align: left;
    padding: 0 0 0 10px;
}
.column {
    flex: 1;
    padding: 0 5px;
}
figure {
    margin: 0;
}
li {
    list-style: none;
}

/***    font   ***/
p {
    margin: 0 !important;
}
.fz10 {
    font-size: 10px;
    line-height: 1.666;
}
.fz12 {
    font-size: 12px;
    line-height: 1.666;
}
.fz13 {
    font-size: 13px;
    line-height: 1.666;
}
.fz14 {
    font-size: 14px;
}
.fz15 {
    font-size: 15px;
    line-height: 1.333;
}
.fz16 {
    font-size: 16px;
    line-height: 1.333;
}
.fz18 {
    font-size: 18px;
}
.fz20 {
    font-size: 20px;
}
.fz29 {
    font-size: 29px;
}
.tac {
    text-align: center;
}

.bold {
    font-weight: bold;
}

/***    /font   ***/

/***    margin   ***/
.mb20 {
    margin-bottom: 20px;
}
.mb26 {
    margin-bottom: 26px;
}

/***    /margin   ***/
.pdl8 {
    padding-left: 8px;
}
.pdl10 {
    padding-left: 10px;
}
.pdl18 {
    padding-left: 18px;
}
.pdr10 {
    padding-right: 10px;
}

main.lp_top .breadcrumb ul {
    justify-content: flex-end;
}
.breadcrumb {
    position: fixed;
    width: 100%;
    height: 40px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    z-index: 10;
}
.breadcrumb ul {
    position: absolute;
    display: flex;
    align-items: center;
    max-width: 375px;
    width: 100%;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding-left: 0;
    margin: 0;
    text-align: left;
}
.breadcrumb ul .return {
    flex-grow: 1;
    padding-left: 8px;
}
.breadcrumb a {
    color: #203354;
}
.top_header {
    color: #203354;
    margin-top: 64px;
    margin-bottom: 16px;
}
.top_header p:last-of-type {
    line-height: 1.6;
}
.punct {
    width: 22px;
    height: 22px;
    line-height: 0;
    margin: 0 auto 20px;
}
.lp_top p.c-red {
    color: #bf4242;
}
.note {
    font-size: 12px;
    color: #bf4242;
    line-height: 1.4;
    margin-top: 42px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px solid #bf4242;
    border-bottom: 1px solid #bf4242;
}
.note.sub {
    margin-top: 0;
}
.button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 240px;
    height: 40px;
    font-weight: normal;
    border-radius: 20px;
}
.button.type01 {
    border: 1px solid #4D4944;
    margin: 0 auto;
    background: #fff;
}
.button.type01::before {
    content: "基本ルールはこちら";
    color: #4D4944;
}
.button.type06 {
    border: 1px solid #BF4242;
    margin: 0 auto;
    background: #fff;
    margin: 16px auto;
}
.button.type06::before {
    content: "たまむすび体験団";
    font-size: 16px;
    color: #BF4242;
}
.button.type02 {
    margin: 27px auto 0;
    background: #CA9B57;
}
.button.type02::before {
    content: "もっと読む";
    color: #fff;
}
.button.type03,
.button.type04,
.button.type05 {
    margin: 27px auto 20px;
    background: #CA9B57;
}
.form .button.type05 {
    margin-top: 0;
}
.lp_top .button.type03 {
    margin-top: 40px;
    margin-bottom: 12px;
}
.button.type03::before {
    content: "チケットへ";
    color: #fff;
}
.button.type04::before {
    content: "はじめる";
    color: #fff;
}

.button.type07 {
    margin: 27px auto 20px;
    background: #55cd59;
}
.button.type07::before {
    content: "購入";
    font-size: 16px;
    color: #fff;
}

.button.type07-purchased {
    margin: 27px auto 20px;
    background: #484d48;
}
.button.type07-purchased::before {
    content: "購入済";
    font-size: 16px;
    color: #fff;
}

/***_______________________________***    help   ***/

.page_help .inner {
    width: 327px;
}
h1.quest_header {
    position: relative;
    display: inline-block;
    font-size: 16px;
    color: #CA9B57;
    letter-spacing: 0.2em;
    margin-bottom: 28px;
}
.everyone_quest {
   padding-top: 32px;
}
.everyone_quest h1.quest_header {
    color: #BF4242;
    letter-spacing: 0;
    margin-bottom: 8px;
}
.everyone_quest h1.quest_header::before,
.everyone_quest h1.quest_header::after {
    background: #BF4242;
}
h1.quest_header::before {
    position: absolute;
    display: block;
    content: "";
    left: -20px;
    bottom: 8px;
    width: 1px;
    height: 20px;
    background: #CA9B57;
    transform: rotate(-45deg);
}
h1.quest_header::after {
    position: absolute;
    display: block;
    content: "";
    right: -15px;
    bottom: 8px;
    width: 1px;
    height: 20px;
    background: #CA9B57;
    transform: rotate(45deg);
}
article {
    margin-bottom: 44px;
}
.article_header {
    font-size: 17px;
    color: #203354;
    margin-top: 15px;
    margin-bottom: 7px;
    line-height: 1.333;
}
.lead_txt {
    color: #393939;
    margin-bottom: 6px;
    padding-bottom: 11px;
}
.everyone_quest .lead_txt {
    border: none;
}
.flexbox {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}
.flexbox p:first-of-type {
    color: #bf4242;
    border: 1px solid #bf4242;
    margin-right: 8.5px;
    padding: 0 2px;
    line-height: 1.1;
}
.flexbox p:last-of-type {
    color: #393939;
}
.time_limit {
    line-height: 1.4;
}
.how_to_quest {
    padding-top: 28px;
}
.how_to_quest h2 {
    color: #203354;
    line-height: 2;
    letter-spacing: -0.02em;
    margin-bottom: 32px;
}
.how_to_quest figure {
    margin-bottom: 10px;
}
.how_to_quest p {
    text-align: left;
    line-height: 1.35;
    letter-spacing: -0.02em;
}
.how_to_quest article {
    margin-bottom: 68px;
}
.how_to_quest .linkbox {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.hero_image {
    display: flex;
    justify-content: center;
    padding-bottom: 32px;
}
.contents .lead_txt {
    border: none;
}
.contents .lead_txt.sub {
    margin-bottom: 0;
    padding-bottom: 0px;
    line-height: 1.3;
    letter-spacing: -0.02em;
}
.contents .lead_txt p:first-of-type {
    margin-bottom: 20px;
}
.contents .flexbox {
    margin-top: 42px;
}
.contents .time_limit {
    margin-bottom: 30px;
}


/***_______________________________***    faq   ***/
.faq .inner {
    width: 100vw;
}
.faq_top {
    width: 287px;
    margin: 0 auto;
    padding-top: 40px;
}
.faq_top figure {
    width: 194px;
    margin: 0 auto;
}
.faq_top > p {
    line-height: 1.3;
    margin-top: 35px;
    margin-bottom: 56px;
}
.faq_nav {
    position: relative;
    background: #F3F7F9;
    margin-bottom: 0;
}
.faq_nav_header {
    position: absolute;
    width: 300px;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
}
.faq_nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 375px;
    margin: 0 auto;
    padding: 56px 0 33px;
}
.faq_nav li {
    display: flex;
    justify-content: center;
    width: 90px;
    height: 90px;
    border: 2px solid #447994;
    border-radius: 45px;
    background: #fff;
}
.faq_nav li a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.faq_nav li:not(:nth-of-type(3n)) {
    margin-right: 20px;
}
.faq_nav li figure {
    width: 40px;
}
.faq_nav li:nth-of-type(3) figure {
    width: 26px;
    margin-right: 6px;
}
.faq_nav li figcaption {
    color: #447994;
    margin-top: 10px;
}
.faq_nav li:nth-of-type(3) figcaption {
    margin-top: 5px;
}
.faq_nav > p {
    padding-bottom: 32px;
}
#faq_nav01,
#faq_nav02,
#faq_nav03,
#faq_nav04,
#faq_nav05,
section.other {
    margin-top: -88px;
    padding-top: 168px;
}
.faq_contents .header_txt {
    position: relative;
    width: 375px;
    height: 88px;
    margin: 0 auto 37px;
}
.faq_contents section:nth-of-type(even) .header_txt {
    transform: scale(-1,1);
}
.faq_contents .header_txt h1 {
    position: absolute;
    top: 0;
    left: -80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 181px;
    height: 88px;
    color: #447994;
    margin-top: 0;
    margin-bottom: 0;
    background: url(../images/cloud.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.faq_contents .header_txt h1 span {
    width: 40px;
    margin-left: 68px;
}
.faq_contents section:nth-of-type(even) .header_txt h1 span {
    transform: scale(-1,1);
}
.faq_contents .header_txt h1 span:last-of-type {
    width: 64px;
    margin-top: 6px;
}
.faq_contents #faq_nav03 .header_txt h1 span:first-of-type {
    width: 24px;
}
.faq_contents .header_txt p {
    position: absolute;
    top: 0;
    right: 30px;
    width: 64%;
    text-align: left;
    line-height: 1.3;
    letter-spacing: 0.05em;
}
.faq_contents section:nth-of-type(even) .header_txt p {
    transform: scale(-1,1);
}
.faq_contents .header_txt p span {
    display: block;
    letter-spacing: 0;
}
.contents_header {
    margin-bottom: 72px;
    background: url(../assets/images/bg_pic.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
/* .faq_contents section:nth-of-type(even) .contents_header {
    width: 375px;
    background: url(../images/bg_pic.png);
    background-repeat: no-repeat;
    background-position: 30% 64%;
    background-size: 293px;
    margin: 0 auto;
    padding-bottom: 72px;
} */
.contents_header > figure {
    width: 308px;
    margin: 0 auto;
    filter: drop-shadow(-2px 2px 6px rgba(0, 0, 0, .3));
}
#faq_nav01 .contents,
#faq_nav02 .contents,
#faq_nav03 .contents,
#faq_nav04 .contents,
#faq_nav05 .contents {
    position: relative;
    background: #F3F7F9;
    padding-top: 96px;
    padding-bottom: 74px;
}
.faq .contents h2 {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 272px;
    height: 77px;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    color: #203354;
    margin: 0 auto;
    background: url(../images/sub_bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    letter-spacing: 0.2em;
}
.faq .contents h2 span {
    display: block;
    margin-bottom: -10px;
}
.faq_slider {
    width: 375px;
    margin: 0 auto;
    padding-left: 0;
}
.faq_slider .slick-slide {
    transform: scale(0.8);
	transition: .5s;
}
.faq_slider .slick-slide li {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    padding: 0 16px;
}
.faq_slider .slick-slide li figure {
    width: 88px;
    filter: drop-shadow(1px 1px 3px rgba(0,0,0,.3));
}
.faq_slider .slick-slide.slick-current,
.faq_slider .slick-slide.is-active-next {
    transform: scale(1);
}
.slick-dots {
    position: absolute;
    top: 240px;
    left: 50%;
    transform: translateX(-50%);
	margin: 80px 0 0 0;
    padding: 0;
}
.slick-dots li {
    display:inline-block;
	margin:0 5px;
}
.slick-dots button {
    color: transparent;
    width:8px;
    height:8px;
    display:block;
    border: 1px solid #203354;
    border-radius:50%;
    background:#fff;
    padding: 0;
}
.slick-dots .slick-active button {
    background:#203354;
}
.faq .contents .sub_txt {
    margin-top: 20px;
}
.faq .contents .sub_txt p:first-of-type {
    color: #CA9B57;
    letter-spacing: 0;
}
.faq .contents .sub_txt p:last-of-type {
    width: 108px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    margin: 0 auto;
    text-align: left;
}
.faq .contents .caution {
    font-size: 12px;
    margin-top: 96px;
    padding: 0 4%;
    line-height: 1.2;
    word-break: keep-all;
    line-break: strict;
    overflow-wrap: break-word;
}
/* .faq_contents section.other {
    width: 375px;
    background: url(../images/bg_pic.png);
    background-repeat: no-repeat;
    background-position: 308% 62%;
    background-size: 293px;
    margin: -88px auto 180px;
} */
.faq_contents section.other figure {
    width: 133px;
    margin: 0 auto;
}
.faq_contents section.other p {
    margin-top: 12px;
}
.icon_hatena {
    position: relative;
    top: 6px;
}
.icon_hatena img {
    width: 40px;
}
.faq_contents section.other figure:last-of-type {
    width: 182px;
    margin-top: 38px;
}


/***_______________________________***    sub-before & sub-after   ***/
.contents h1 {
    font-size: 25px;
    color: #203354;
    letter-spacing: -0.02em;
    margin-bottom: 28px;
}



/***_______________________________***    mission   ***/

.page_mission .breadcrumb ul {
    justify-content: flex-end;
}
.page_mission .breadcrumb li {
    display: flex;
    justify-content: flex-end;
}
.page_mission .breadcrumb a {
    width: 40px;
    height: 40px;
}
#parts_mission {
    margin-top: 60px;
}
.page_mission h1 {
    font-size: 20px;
    color: #CA9B57;
    line-height: 1;
    letter-spacing: 0.3em;
    margin-top: 0;
    margin-bottom: 40px;
}
.page_mission h2 {
    font-size: 20px;
    color: #CA9B57;
    line-height: 1;
    letter-spacing: 0.3em;
    margin-top: 0;
    margin-bottom: 14px;
}
.page_mission .hero_image {
    padding-bottom: 36px;
}
.page_mission .sub_image {
    margin-bottom: 8px;
}
.gif_image {
    width: 200px;
    height: 200px;
    margin: 0 auto;
}
.page_mission .qu_txt {
    letter-spacing: -0.02em;
    margin-top: 13px;
    margin-bottom: 43px;
}
.page_mission .box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid #8A8988;
    margin-bottom: 27px;
    background: #fff;
}
.hint {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 31px;
    color: #8A8988;
    margin-left: -4px;
    letter-spacing: 0.3em;
}
.hint::after {
    content: "";
    width: 0;
    height: 0;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    border-top: 8px solid #8A8988;
    margin-left: 4px;
}
.page_mission .sentence {
    display: none;
    color: #CA9B57;
    padding: 21px 0;
}
input[type="text"]:not(.form-control) {
    font-family: "chiarob";
    font-size: 16px;
    width: 100%;
    height: 31px;
    margin-bottom: 18px;
    padding: 0 16px;
    border-radius: 6.5px;
    border: 1px solid #d9d9d9;
}
input[type="text"]::placeholder {
    color: rgba(138, 137, 136, .3);
}
input.button {
    font-family: "chiarob";
    color: #fff;
    border: none;
}
.result {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 36px;
    overflow: hidden;
    white-space: normal;
}
.result p:first-of-type {
    letter-spacing: -0.02em;
    padding-top: 16px;
}
/* .page_mission.second .result > p:last-of-type {
    margin-top: 42px;
} */
.reward {
    color: #bf4242;
    margin-top: 38px;
    margin-bottom: 6px;
}
.result .earn-rewards a {
    color: #4D4944;
}
.result .achievement {
    margin-top: 38px;
}
.result .sns_share {
    width: 100%;
    margin-top: 43px;
    /* border-top: 1px solid #CA9B57;
    border-bottom: 1px solid #CA9B57; */
}
.result .sns_share a {
    font-size: 12px;
    justify-content: center;
    text-decoration: underline;
}
.result .sns_share p {
    font-size: 18px;
    color: #CA9B57;
    line-height: 1.111;
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 0;
}
.result .sns_box {
    display: flex;
    justify-content: center;
    margin-bottom: 13px;
}
.result .sns_box a {
    width: 24px;
    background: #fff;
}
.result .sns_box a:not(:last-of-type) {
    margin-right: 24px;
}
.page_mission.second .reward .result:last-of-type {
    margin-top: 42px;
}
.regret {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: 48px;
}
.regret figure {
    width: 200px;
    height: 160px;
}
.regret p {
    line-height: 1;
    margin-right: 22px;
}
/***_______________________________***    mission-popup   ***/
.popup {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: .6s;
}
.popup.is-show {
    opacity: 1;
    visibility: visible;
}
.popup-inner {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 327px;
    max-width: 375px;
    padding: 20px 26px 32px;
    background-color: #fff;
    border-radius: 10px;
    z-index: 2;
}
.popup-inner p:nth-of-type(1) {
    margin-bottom: 30px;
}
.popup-inner p:nth-of-type(1) span {
    color: #CA9B57;
}
.popup-inner p:nth-of-type(2) {
    line-height: 1.4;
}
.popup-inner .p_word {
    width: 227px;
    border-top: 1px solid #CA9B57;
    border-bottom: 1px solid #CA9B57;
    margin-top: 24px;
}
.popup-inner .p_word p:first-of-type {
    line-height: 1;
    margin-top: 12px;
    margin-bottom: 5px;
}
.popup-inner .p_word p:last-of-type {
    color: #CA9B57;
    margin-bottom: 12px;
}
.popup-inner .close-btn {
    border: 1px solid #4D4944;
}
.popup-inner .close-btn p {
    margin-bottom: 0;
}
.popup-inner .result {
    width: 100%;
    padding-bottom: 20px;
}
.popup-inner .result p {
    font-size: 14px;
    color: #4D4944;
    margin-bottom: 10px;
}
.popup-inner .result p:nth-of-type(1) span {
    font-size: 10px;
    color: #4D4944;
    margin-left: 2px;
}
.popup-inner .result .line_link {
    width: 227px;
}
.popup-inner .result .line_link a {
    color: #fff;
    justify-content: center;
    background: #80C41C;
    border-radius: 22px;
    padding: 5px 0;
}
.popup-inner .result .line_link a span {
    display: block;
    width: 31px;
    height: 30px;
    background-image: url(../images/line_icon-white.svg);
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 6px;
}
.popup-inner .result .sns_share {
    border: none;
    margin-top: 0;
}
.popup-inner .result .sns_share a {
    padding-top: 20px;
}
.popup-inner .result .sns_share p {
    font-size: 15px;
    color: #4D4944;
    letter-spacing: -0.02em;
}
.black-background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(77,73,68,.6);
    z-index: 1;
    cursor: pointer;
}
.hiddenArea {
	display: none;
}
.gothic {
    font-family: 'Noto Sans', system-ui, sans-serif;
}
.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}

.result .line_logo img {
    width:48px; 
}

.background-grey {
    background-color: gainsboro;
}

.insert_image {
    width: 200px !important; 
    height: 200px !important;
    background-color: gainsboro;
    display: block;
}

.next-mission {
    font-weight: bold;
    font-size: 1.2em;
}
/** top **/
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 25px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 25px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 3.5px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #4caf50;
}

input:checked + .slider:before {
    transform: translateX(24px);
}
.modal-content {
    background-color: #203354 !important;
    border-radius: 15px !important;
}
.modal-title {
    font-family: 'Noto Sans', system-ui, sans-serif;
    color: #FFF;
}
.modal-body {
    text-align: left;
    border-radius: 0 0 15px 15px;
    background-color: #D9E4EA;
    color: #203354;
    font-family: 'Noto Sans', system-ui, sans-serif;
    word-break: normal;
    overflow-wrap: break-word;
    line-break: auto;
}
.choice-modal-body {
    border-radius: 0;
}
.modal-footer {
    font-family: 'Noto Sans', system-ui, sans-serif;
}
.modal-episodes {
    list-style-type: disc;
}
.btn-close {
    filter: brightness(0) invert(1);
}
.input-area {
    background-color: #D9E4EA;
    position: absolute;
    bottom: 0px;
    height: 60px;
    width: 100%;
    z-index: 10;
    display: none;
    padding: 10px 25px 10px 20px;
    gap: 10px;
    box-sizing: border-box;
}
input#message-input {
    color: #203354;
    height: 38px
}

.message-system {
    text-align: left;
    padding: 10px 25px 10px 25px;
    color: #203354;
    font-family: 'Noto Sans', system-ui, sans-serif;
    background-color: white;
    border-radius: 20px;
    margin: 0px 15% 10px 0px;
    word-break: normal;
    overflow-wrap: break-word;
    line-break: auto;
}

.message-user {
    text-align: right;
    padding: 10px 25px 10px 25px;
    color: #203354;
    font-family: 'Noto Sans', system-ui, sans-serif;
    background-color: white;
    border-radius: 20px;
    margin: 0px 10px 10px 15%;
    word-break: normal;
    overflow-wrap: break-word;
    line-break: auto;
}
.chat-system {
    display: flex;
    align-items: top;
    gap: 12px;
    margin: 10px;
}
.chat-user {
    display: flex;
    align-items: top;
    gap: 12px;
    margin: 10px;
    justify-content: flex-end;
}

.icon-system {
  width: 50px;
  height: 50px;
  object-fit: cover;
}



/* bottom-sheet */
#bottom-sheet {
    border-radius: 15px 15px 0px 0px;
    background-color: #203354;
    width: 100%;
    position: absolute;
    top: calc(var(--vh) * 85);
    overflow-y: hidden;
    z-index: 5;
    display: block;
    padding-bottom: 25px;
    margin-bottom:  env(safe-area-inset-bottom);
    bottom: 0px;
}
.sheet-drag-bar {
    padding: 0 1rem 1rem 1rem;
    text-align: center;
    width: 100%;
    display: block;
    border: none;
    background-color: #203354;
    user-select: none;
    cursor: pointer;
    outline: none;
    touch-action: none;           /* Hammerに全面委譲（上下スワイプを取りこぼさない） */
    -ms-touch-action: none;
}
.sheet-drag-bar img{
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: auto;
    margin-left: auto;
    width: 20px;
}
#bottom-close-header {
    color: #fff;
    font-size: 1.2em;
    font-family: 'Noto Sans', system-ui, sans-serif;
    margin-bottom: 40px;
}
.contents-target-message {
    display: block
}
.header-bottom-sheet {
    position: fixed;
    margin-left: 20px;
    margin-right: 20px;
}
#content-bottom-sheet {
    /*margin-top: 20px;*/
    height: 100%;
    background-color: #D9E4EA;
    display: none;
}
#chat-area {
    height: 100%;
    cursor: pointer;
    overflow-y: auto;
    overflow-x: hidden;
}

.top_banner {
    max-width: 100%;
    width: 100%;
    height: auto;
}

/* hover時 */
button:hover img {
  transform: scale(1.05);
  filter: brightness(0.9);
}

/* 押した時（active） */
button:active img {
  transform: scale(0.95);
  filter: brightness(0.8);
}

#stamp-container {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 100px;
    display: block; 
}

#stamp-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.auth-modal-body .auth-view { max-width: 480px; margin: 0 auto; }