@charset "UTF-8";
@media screen and (max-width: 600px) {
  /* wrapper */
  #wrapper {
    min-width: 300px;
  }
  /* header */
  #header {
    width: 100%;
    text-align: left;
  }
  header {
    display: flex;
    padding: 35px 5%;
  }
  #header #yd_logo {
    width: 19.5%;
  }
  #header #yd_logo img {
    width: 65%;
  }
  #header #logo {
    width: 61%;
    margin-right: 19.5%;
  }
  #header #navi {
    display: none;
  }
  /* footer */
  #footer {
    padding: 4em 8% 6em;
  }
  #footer footer {
    display: block;
  }
  #footer footer .ft_left {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: row;
  }
  #footer footer .ft_left #ft_yd_logo {
    width: 20%;
  }
  #footer footer .ft_left #ft_logo {
    width: 65%;
    margin-top: auto;
  }
  #footer footer .ft_right {
    width: 100%;
  }
  #footer footer .ft_right nav {
    display: block;
    margin-top: 2em;
  }
  #footer footer .ft_right nav h3 {
    color: #9A9A9A;
    margin-bottom: 1em;
  }
  #footer footer .ft_right nav #ft_contents, #ft_order, #ft_contact {
    display: none;
  }
  #footer footer .ft_right nav #ft_info dl {
    margin-bottom: 1.5em;
  }
  #footer footer .ft_right nav #ft_info dl dt {
    margin-bottom: 0.3em;
  }
  #footer footer .ft_right #ft_button {
    margin-top: 3em;
    display: block;
    text-align: left;
  }
  #footer footer .ft_right #ft_button #mc .midashi {
    margin-bottom: 1em;
  }
  #footer footer .ft_right #ft_button #mc .midashi h2 {
    display: block;
    margin-right: 0;
    margin-bottom: 0.2em;
  }
  #footer footer .ft_right #ft_button #mc .midashi p {
    display: block;
  }
  #footer footer .ft_right #ft_button #mc .mc-field-group {
    display: block;
    vertical-align: bottom;
  }
  #footer footer .ft_right #ft_button #mc .mc-field-group input {
    appearance: none;
    outline: none;
    height: 38px;
    width: 100%;
    background-color: #F7F7F5;
    border-bottom: 0px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-left-width: 0px;
    padding: 7px 10px;
    color: #9A9A9A;
    font-size: 1em;
  }
  #footer footer .ft_right #ft_button #mc .mc-field-group input:focus {
    background-color: #FFF;
    color: #121212;
  }
  #footer footer .ft_right #ft_button #mc .clear {
    display: block;
  }
  #footer footer .ft_right #ft_button #mc .button_submit {
    background-color: #3e3e3e;
    text-align: center;
    line-height: 38px;
    width: 50%;
    margin: 1em auto 0 0;
  }
  #footer footer .ft_right #ft_button #mc .button_submit input {
    color: #FFF;
  }
  #footer footer .ft_right #ft_button #sns_icon {
    margin-left: 0;
    margin-right: auto;
    margin-top: 2.5em;
    width: auto;
  }
  #footer footer .ft_right #ft_button #sns_icon a {
    display: inline-block;
    margin-left: 0;
    margin-right: 1em;
    width: 1.6em;
  }
  #footer .copyright {
    display: flex;
    justify-content: space-between;
    text-align: left;
    margin-top: 4em;
    padding-top: 1.2em;
    border-top: 1px solid #707070;
  }
  #footer .copyright p {
    margin-right: 1.2em;
  }
  #footer .copyright p:last-of-type {
    margin-right: 0;
    margin-left: auto;
  }
  /* banner */
  #banner {
    padding: 0;
    display: block;
  }
  #banner .flex {
    width: 100%;
    display: flex;
  }
  #banner div figure {
    width: 50%;
  }
  #banner div section {
    width: 50%;
    padding: 0;
    text-align: center;
  }
  #banner div section h3 {
    margin-bottom: 0.5em;
    font-size: 1.15em;
  }
  #banner .onlinestore section {
    order: 1;
  }
  #banner .onlinestore figure {
    order: 2;
    ;
  }
  #banner .onlinestore section h3 {
    padding-left: 1.5em;
    display: inline-block;
  }
  #banner .onlinestore section h3::before {
    position: absolute;
    width: 1.7em;
    top: 1px;
    left: -0.5em;
  }
  #banner div section p {
    text-align: justify;
    margin-bottom: 1.5em;
    padding: 0 15%;
  }
  /* 全共通 見出し */
  .sub_title {
    margin-bottom: 2em;
  }
  .layer_title {
    margin-bottom: 2em;
  }
  .layer_title:after {
    background-color: #707070;
    content: '';
    display: block;
    width: 1px;
    height: 20px;
    margin: 1em auto 0;
  }
  /* 全共通 ボタンリンク */
  .link_line a {
    padding-bottom: 0.5em;
    border-bottom: 1px solid #707070;
  }
  .link_button {
    line-height: 1;
    border: 1px solid #707070;
    padding: 10px 20px;
    display: inline-block;
    border-radius: 20px;
  }
  a .link_button:hover {
    background-color: #FFF;
  }
  .other_button {
    line-height: 1;
    border: 1px solid #707070;
    padding: 20px;
    width: 200px;
    display: inline-block;
    text-align: center !important;
  }
  a .other_button:hover {
    background-color: #FFF;
  }
  .link_arrow {
    text-align: center !important;
    font-size: 0.8em;
    width: 23px;
    line-height: 22px;
    border: 1px solid #707070;
    display: inline-block;
    border-radius: 50%;
  }
  a .link_arrow:hover {
    background-color: #FFF;
  }
  .material-icons-outlined {
    font-size: 0.8em;
  }
  /* 全共通 swiper */
  .swiper-button-prev, .swiper-button-next {
    position: absolute;
    top: 50%;
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px; /* ボタンの幅 */
    height: 20px; /* ボタンの高さ */
    background-size: 20px 20px; /* 背景画像としてのサイズ（＝表示したい画像サイズ） */
    margin-top: -24px; /* 縦中央配置用：ボタンの高さの半分のネガティブマージン（top:50%がすでに設定されている） */
  }
  .swiper-button-next {
    right: 6%;
    background-image: url("../images/swiper_arrow.svg");
    transform: scale(-1, 1); /* 左右反転 */
  }
  .swiper-button-prev {
    left: 6%;
    background-image: url("../images/swiper_arrow.svg");
  }
  .swiper-button-prev:after, .swiper-button-next:after {
    display: none;
  }
  .swiper-pagination-bullet {
    width: 9px !important;
    height: 9px !important;
    margin: 0 0 0 10px !important;
    background: #FFF !important;
  }
  .swiper-pagination-bullet:first-child {
    margin: 0 !important;
  }
}