/* レスポンシブ設定 */

@media screen and (max-width: 479px) {
    .container {
        width: 100%;
    }
}

@media screen and (min-width: 480px) {
    .container {
        width: 480px;
    }
}


/* 要素 */

body {
    text-align: center;
    margin: auto;
    padding: 0;
    /* font-family: "M PLUS Rounded 1c", sans-serif; */
    font-family: 'Hachi Maru Pop', cursive;
    background-color: #fef6e4;
    color: #001858;
    background-image: url('./img/ribbon_05.gif');
    background-repeat: repeat-x;
    background-position: bottom;
}

header {
    background-color: white;
}

footer {
    padding-top: 2em;
    padding-bottom: 200px;
}

section {
    margin: 0;
    padding: 0 0 2em 0;
}

figure {
    margin: 0;
}

figcaption {
    margin: 1em 0;
}

h2 {
    margin-block-start: 0;
    margin-block-end: 0;
    padding: 0.83em 0;
}

ul {
    text-align: left;
}

li {
    padding-inline-end: 1em;
}

nav {
    background: white;
}

nav ul {
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px;
    display: flex;
    justify-content: space-around;
}

nav ul li {
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 25%;
    list-style: none;
}

nav ul li a {
    display: block;
    width: 100%;
    padding-top: 24.53%;
    background-size: contain;
    background-repeat: no-repeat;
    font-size: 0;
}

h1,
h2,
h3 {
    font-weight: bold;
}

a {
    color: #2991A6;
    text-decoration: none;
}

a:hover {
    color: #4CAFC0;
}


/* クラス */

.container {
    margin: auto;
}

.area {
    width: 100%;
    border: none;
    overflow: hidden;
    margin: auto;
}

.marquee {
    width: 100%;
    padding-left: 100%;
    white-space: nowrap;
    color: #f582ae;
    font-weight: bold;
    animation-name: marquee;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes marquee {
    from {
        transform: translate(0%);
    }
    100%,
    to {
        transform: translate(-100%);
    }
}

.top_message {
    margin-block-start: 0em;
    margin-block-end: 0em;
    padding: 1em 0;
    font-size: 70%;
    background: #f582ae;
    color: #fef6e4;
}

h1.site_logo {
    margin: 0;
    margin-block-start: 0;
    margin-block-end: 0;
}

h1.site_logo a {
    display: block;
    width: 100%;
    padding-top: 56%;
    border: none;
    background: url('./img/site_header.png') no-repeat;
    background-size: cover;
    font-size: 0;
}

.nav_about {
    background-image: url('./img/bird_01/about.png');
}

.nav_prof {
    background-image: url('./img/bird_01/prof.png');
}

.nav_work {
    background-image: url('./img/bird_01/works.png');
}

.nav_contact {
    background-image: url('./img/bird_01/contact.png');
}

.nav_link {
    background-image: url('./img/bird_01/link.png');
}

.icon {
    display: block;
    margin: auto;
    padding: 20px;
    width: 32px;
    height: 32px;
    background-image: url('./img/biwahara_icon.png');
    background-color: white;
    background-position: center;
    background-size: cover;
    box-shadow: 6px 6px 0px 0px #001858;
    border-radius: 50%;
    font-size: 0;
}

.accounts {
    text-align: center;
    padding-inline-start: 0;
}

.accounts li {
    list-style: none;
}

.counter {
    height: 30px;
    padding: 0.5em 0;
}

.link_self {
    margin: 0 2em;
    padding: 1em;
    background-color: white;
    box-shadow: 6px 6px 0px 0px #f3d2c1;
}

.link_description {
    font-size: 70%;
}

.copyright,
.credit {
    font-family: verdana;
    font-size: 70%;
}

.teba {
    padding-top: 100px;
    background: url('./img/teba.png') no-repeat 50% 50%;
    background-size: contain;
}

.kashibon {
    padding-top: 100px;
    background: url('./img/kashibon.png') no-repeat 50% 50%;
    background-size: contain;
}

.shampoo {
    padding-top: 100px;
    background: url('./img/shampoo.png') no-repeat 50% 50%;
    background-size: contain;
}

img.manga_fit {
    width: 100%;
    margin-bottom: 1em;
}


/* LINEスタンプのページ */

section.linestamp {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-weight: 400;
}

section.linestamp h2 {
    font-weight: 700;
}

section.linestamp strong {
    font-weight: 700;
}

.stampshop_thumb {
    width: 100%;
}

.long_text p {
    text-align: left;
    margin: 1em;
    text-indent: 1em;
}

.talk_area {
    /*	background: #6FA1C7; */
    background: #92AAD4;
    text-align: left;
    padding: 0.4em 1em 0.4em 3em;
}

.talk_area p.sms {
    display: inline-block;
    max-width: 70%;
    background: white;
    border-radius: 0 1em 1em 1em;
    padding: 0.3em 0.8em;
    margin: 0.2em 0;
    font-family: 'ヒラギノ角ゴシック';
    color: black;
}

.talk_area .submit {
    text-align: right;
}

.submit p.sms {
    background: #8DE386;
    border-radius: 1em 0 1em 1em;
    margin-left: auto;
}

.talk_area .receive {
    text-align: left;
}

img.stamp {
    display: block;
    margin: 0.2em 0;
    --boxwidth: 100%;
    width: min(50%, 50vw);
    height: min(208px, 40vw);
    object-fit: contain;
}

.submit img.stamp {
    margin-left: auto;
}

.stamp_caption {
    margin-block-start: 0.1em;
    margin-block-end: 3.9em;
}

.new {
    font-size: 80%;
    color: #fe005b;
    font-weight: bold;
}


/* ID */

#out {
    font-family: 'Consolas', monospace;
    color: gray;
}

#sec_prof {
    background: #8bd3dd;
}

#sec_contact {
    background: #f3d2c1;
}