@charset "UTF-8";
@font-face {
    font-family: "yumincho";
    src: url(../font/yuminSubset.woff) format("woff");
}

html {
    font-size: 16px;
}

body {
    line-height: 1.5;
    letter-spacing: 0.06em;
    font-family: 'ヒラギノ角ゴシック', sans-serif;
    color: #363636;
}

body.fixed {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
}

section {
    padding: 50px 0;
}

@media screen and (max-width: 767px) {
    section {
        padding: 30px 0;
    }
}

h2, h3, h4 {
    font-family: "ヒラギノ明朝 pro", "游明朝", "Yu Mincho", "YuMincho", "yumincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "メイリオ", "Meiryo", serif;
}

ruby rt{
    font-weight: 300;
}

.name, .person, .mincho {
    font-family: "ヒラギノ明朝 pro", "游明朝", "Yu Mincho", "YuMincho", "yumincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "メイリオ", "Meiryo", serif;
}

img {
    width: 100%;
    height: auto;
    vertical-align: top;
}

a {
    text-decoration: none;
    color: #000;
    -webkit-transition: 0.3s all 0s ease;
    transition: 0.3s all 0s ease;
}

a.td-u {
    border-bottom: 1px solid #c4c4c4;
}

a.opacity:hover {
    opacity: 0.7;
}

.df {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.fw-b {
    font-weight: bold;
}

@media screen and (max-width: 767px) {
    .ls-002 {
        letter-spacing: -0.02em;
    }
}

.dib {
    display: inline-block;
}

.inner {
    max-width: 1130px;
    width: 100%;
    margin: 0 auto;
    padding: 0 10px;
}

@media screen and (max-width: 1024px) {
    .inner {
        max-width: 900px;
    }
}

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

.inner-narrow {
    max-width: 974px;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

@media screen and (max-width: 767px) {
    .inner-narrow {
        max-width: 100%;
    }
}

.pc {
    display: block;
}

@media screen and (max-width: 767px) {
    .pc {
        display: none !important;
    }
}

.pc-only {
    display: block;
}

@media screen and (max-width: 1024px) {
    .pc-only {
        display: none;
    }
}

.tablet {
    display: none;
}

@media screen and (max-width: 1024px) {
    .tablet {
        display: block;
    }
}

.sp {
    display: none !important;
}

@media screen and (max-width: 767px) {
    .sp {
        display: block !important;
    }
}

.renewal{
    display: none;
}

.gray-bg {
    background-color: #f3f3f3;
}

header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    height: 62px;
}

.pc-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.3);
}

.header .header-logo {
    margin-left: 20px;
    width: 20%;
    width: 245px;
}

.header .icon-80th {
    margin-left: 20px;
    width: 75px;
}

.icon-80th img{
    width: 100%;
    max-width: 90px;
}
.pc-menu ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0;
    margin: 0;
    max-width: 1130px;
    width: 100%;
}

.pc-menu li a {
    position: relative;
    padding: 10px 20px;
    color: #fff;
    font-family: "ヒラギノ明朝 pro", "游明朝", "Yu Mincho", "YuMincho", "yumincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "メイリオ", "Meiryo", serif;
    /* letter-spacing: 0.3em; */
}

.en-top .pc-menu li a {
    letter-spacing: 0.1rem;
}

.pc-menu li a::before {
    content: '';
    position: absolute;
    display: block;
    width: 1px;
    height: 20px;
    background-color: #fff;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.pc-menu li a::after {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 1px;
    background-color: #fff;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 0;
    -webkit-transition: 0.3s all 0s ease;
    transition: 0.3s all 0s ease;
}

.pc-menu li a:hover::after {
    width: 50%;
}

.pc-menu li:nth-child(6) a::before,
.pc-menu li:nth-child(7) a::before,
.pc-menu li:nth-child(8) a::before{
    display: none;
}

.pc-menu li:nth-child(7) a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    background-color: #ee7502;
    padding: 10px 12px;
    font-family: "ヒラギノ角ゴシック", "ヒラギノ角ゴシック pro", sans-serif;
    line-height: 1;
    letter-spacing: 0.1em;
}
.pc-menu li:nth-child(7) a::after {
    display: none;
}

.pc-menu li:nth-child(7) a .icon {
    width: 37px;
    margin-right: 10px;
}

.pc-menu li.shoplink a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    background-color: #ee7502;
    padding: 10px 12px;
    font-family: "ヒラギノ角ゴシック", "ヒラギノ角ゴシック pro", sans-serif;
    line-height: 1;
    letter-spacing: 0.1em;
}

.pc-menu li.shoplink a::after {
    display: none;
}
.pc-menu li.shoplink a .icon {
    width: 37px;
    margin-right: 10px;
}

li.menu__mega {
    position: relative;
}

li.menu__mega .menu__second-level.right0 {
    right: 0px;
}

li.menu__mega .menu__second-level {
    position: absolute;
    top: 33px;
    /* left: -100%; */
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 360%;
    background-color: #000040;
    -webkit-transition: 0.3s all 0s ease;
    transition: 0.3s all 0s ease;
    visibility: hidden;
    opacity: 0;
    color: #fff;
}

li.menu__mega:hover .menu__second-level {
    top: 33px;
    visibility: visible;
    opacity: 1;
}

li.menu__mega .pad {
    padding: 20px;
}

li.menu__mega .pad .title {
    font-size: 1.3rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

li.menu__mega .pad .title span {
    padding-left: 70px;
    font-size: 0.8rem;
    display: block;
    position: relative;
}

li.menu__mega .pad .title span::before {
    content: '';
    position: absolute;
    display: block;
    width: 60px;
    height: 1px;
    background-color: #fff;
    left: 5px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

li.menu__mega .menu__second-level li {
    width: 300px;
    margin-right: 18px;
    margin-top: 10px;
}

li.menu__mega .menu__second-level li:last-child {
    margin-right: 0;
}

li.menu__mega .menu__second-level li a {
    padding: 0;
}

li.menu__mega .menu__second-level li a::before,
li.menu__mega .menu__second-level li a::after {
    display: none;
}

li.menu__mega .menu__second-level li p {
    background-color: #fff;
    color: #000040;
    padding: 5px 10px;
    font-family: "ヒラギノ角ゴシック", "ヒラギノ角ゴシック pro", sans-serif;
    letter-spacing: 0;
}
.pc-menu select{
    padding: 3px 10px;
    margin: 10px;
    background: none;
    color: #fff;
    border: none;
    border-bottom: 1px #fff dotted;
}

.pc-menu select option{
    color: #000;
}

#hamburger,
.sp-menu {
    display: none;
}

@media screen and (max-width: 1300px) {
    .pc-menu li a {
        padding: 10px;
    }
}

@media (max-width: 1024px) {
    .header {
        height: 60px;
        background-color: #000040;
        padding: 0 18px 0 15px;
    }
    .header-inner {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .header__bar {
        height: 60px;
    }
    .header__bar .white-logo {
        max-width: 200px;
        padding-top: 5px;
    }
    /*
    --------------- ハンバーガーメニュー */
    #hamburger {
        background-color: transparent;
        position: relative;
        display: block;
        cursor: pointer;
        margin: 0 0 0 auto;
        height: 60px;
        width: 30px;
    }
    #hamburger p {
        font-size: 0.625rem;
        line-height: 1;
        position: absolute;
        left: 0;
        bottom: 11px;
        color: #fff;
    }
    .icon span {
        position: absolute;
        left: 1px;
        width: 28px;
        height: 2px;
        background-color: white;
        border-radius: 8px;
        -webkit-transition: ease 0.75s;
        transition: ease 0.75s;
    }
    .icon span:nth-of-type(1) {
        top: 14px;
    }
    .icon span:nth-of-type(2) {
        top: 23px;
    }
    .icon span:nth-of-type(3) {
        top: 32px;
    }
    .close span:nth-of-type(1) {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        top: 25px;
    }
    .close span:nth-of-type(2) {
        opacity: 0;
    }
    .close span:nth-of-type(3) {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        top: 25px;
    }
    .pc-menu {
        display: none;
    }
    .sp-menu {
        top: 60px;
        left: 0px;
        position: absolute;
        z-index: 10;
        width: 100%;
        height: calc(100vh - 60px);
        background-color: #f2f2f2;
    }
    .sp-menu ul {
        padding: 0 15px;
    }
    .sp-menu li {
        margin-top: 5px;
        background-color: #fff;
        position: relative;
    }
    .sp-menu li.logo {
        background-color: transparent;
        max-width: 300px;
    }
    .sp-menu li.logo::after {
        display: none;
    }
    .sp-menu li::after {
        content: '';
        position: absolute;
        display: block;
        background-size: cover;
        background-repeat: no-repeat;
        background-image: url(../img/top/header-arrow.png);
        width: 7px;
        height: 14px;
        right: 20px;
        top: 21px;
    }
    .sp-menu li.drop-list::after {
        display: none;
    }
    .sp-menu li.drop-list .dropdown::before {
        content: '';
        position: absolute;
        display: block;
        width: 22px;
        height: 22px;
        border: 1px solid #000;
        border-radius: 50%;
        right: 12px;
        top: 18px;
    }
    .sp-menu li.drop-list .dropdown::after {
        content: '';
        position: absolute;
        display: block;
        background-size: cover;
        background-repeat: no-repeat;
        background-image: url(../img/top/header-arrow.png);
        width: 5px;
        height: 10px;
        right: 21px;
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        top: 24px;
        -webkit-transition: 0.3s all 0s ease;
        transition: 0.3s all 0s ease;
    }
    .sp-menu li.drop-list .dropdown.open::after {
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }
    .sp-menu a,
    .sp-menu span {
        padding: 18px 0;
        display: block;
        text-align: center;
    }
    .sp-menu .toShop {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
    .sp-menu .toShop .icon {
        display: block;
        padding: 0;
        margin-right: 10px;
        width: 32px;
    }
    .sp-menu .submenu {
        position: relative;
        display: none;
        z-index: 0;
        background-color: #fff;
        padding: 0;
        margin-top: 0;
    }
    .sp-menu .submenu li {
        /* padding: 0.5rem 20px; */
        border-bottom: 1px dotted #ddd;
    }
    .sp-menu .submenu a {
        /* border-top: 2px solid #f2f2f2; */
    }
    .sp-menu .paint-menu {
        margin-top: 15px;
    }
    .sp-menu .paint {
        background-color: #000040;
        -webkit-transition: 0.3s all 0s ease;
        transition: 0.3s all 0s ease;
    }
    .sp-menu .paint .orenge{
        background-color: #000040;
    }

    .sp-menu .paint:hover {
        background-color: #fff;
    }
    .sp-menu .paint:hover a {
        color: #000040;
    }
    .sp-menu .paint::after {
        display: none;
    }
    .sp-menu .paint a {
        line-height: 34px;
        color: #fff;
        font-family: "ヒラギノ明朝 pro", "游明朝", "Yu Mincho", "YuMincho", "yumincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "メイリオ", "Meiryo", serif;
        -webkit-transition: 0.3s all 0s ease;
        transition: 0.3s all 0s ease;
    }
    .sp-menu .toContact {
        margin-top: 30px;
    }
    .sp-menu .toContact .title {
        font-family: "ヒラギノ明朝 pro", "游明朝", "Yu Mincho", "YuMincho", "yumincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "メイリオ", "Meiryo", serif;
        text-align: center;
    }
    .sp-menu .toContact .content,
    .sp-menu .toContact .tel a,
    .sp-menu .toContact .mail a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .sp-menu .toContact .content {
        max-width: 500px;
        margin: 0 auto;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
    .sp-menu .toContact .icon {
        width: 30px;
        margin-right: 5px;
    }
    .sp-menu .toContact .tel, .sp-menu .toContact .mail {
        padding: 0 10px;
    }
    .sp-menu .toContact .tel {
        border-right: 1px solid #000040;
    }
    .sp-menu .toContact .tel a,
    .sp-menu .toContact .mail a {
        border-bottom: 2px dotted #000;
    }
    .sp-menu .toContact .paint {
        margin-top: 5px;
    }

    .toContact .language-select{
        text-align:center;
    }
    .toContact .language-select select{
        margin: 10px auto;
        text-align: center;
        padding: 0.5rem 1rem;
        font-size: 1rem;
    }
}

@media screen and (max-width: 767px) {
    .sp-menu li {
        padding: 0;
    }
    .sp-menu li.logo {
        max-width: 400px;
        margin: 0 auto;
        width: 95%;
    }
    .sp-menu li::after {
        /* top: 14px; */
    }
    .sp-menu li.drop-list .dropdown::before {
        top: 10px;
    }
    .sp-menu li.drop-list .dropdown::after {
        top: 16px;
    }
    .sp-menu li.drop-list .dropdown.open::after {
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }
    .sp-menu a, .sp-menu span {
        padding: 1rem 0;
    }
    .sp-menu .toShop .icon {
        width: 36px;
    }
    .sp-menu .toShop {
        padding: 0.5rem 0;
    }
    .sp-menu .toContact .content {
        -webkit-box-orient: inherit;
        -webkit-box-direction: inherit;
        -ms-flex-direction: inherit;
        flex-direction: inherit;
    }
    .header .logo {
        max-width: 60%;
    }
    .header .icon-80th{
        max-width: 20%;
    }
}

@media screen and (max-width: 767px) {
    .sp-menu .toContact a {
        padding: 0.5rem 0;
    }
    .sp-menu .toContact .icon {
        width: 25px;
    }
}

.footer {
    background-color: #000040;
    color: #fff;
    font-size: 0.8rem;
}

.footer-top {
    max-width: 840px;
    margin: 0 auto;
    padding: 30px 20px;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.footer-top .left,
.footer-top .right {
    -webkit-transition: 0.3s all 0s ease;
    transition: 0.3s all 0s ease;
}

.footer-top .left:hover,
.footer-top .right:hover {
    opacity: 0.7;
}

.border {
    height: 1px;
    width: 100%;
    background-color: #2e2e52;
    margin: 0 auto;
}

.footer-bottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0px auto;
    max-width: 1360px;
    width: 100%;
    padding: 30px 80px 80px;
}

.footer .info__logo a {
    -webkit-transition: 0.3s all 0s ease;
    transition: 0.3s all 0s ease;
}

.footer .info__logo a:hover {
    opacity: 0.7;
}

.footer .info__address {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    margin-top: 20px;
    color: #fff;
    line-height: 1.4;
    -webkit-transition: 0.3s all 0s ease;
    transition: 0.3s all 0s ease;
}

.footer .info__address:hover {
    opacity: 0.7;
}

.footer .info__address .icon {
    width: 15px;
}

.footer .info__tel {
    text-align: center;
}

.footer .info__tel .number {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
    font-size: 2rem;
    margin-top: 18px;
    -webkit-transition: 0.3s all 0s ease;
    transition: 0.3s all 0s ease;
    font-family: "ヒラギノ明朝 pro", "游明朝", "Yu Mincho", "YuMincho", "yumincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "メイリオ", "Meiryo", serif;
    font-weight: 600;
}

.footer .info__tel .number:hover {
    opacity: 0.7;
}

.footer .info__tel .number .icon {
    width: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.footer .info__tel .time {
    margin-top: 5px;
}

.footer .info__contact.btnSquare {
    margin-top: 30px;
    text-align: center;
}

.footer .info__contact.btnSquare a {
    font-size: 0.9rem;
    font-family: "ヒラギノ明朝 pro", "游明朝", "Yu Mincho", "YuMincho", "yumincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "メイリオ", "Meiryo", serif;
    line-height: 36px;
    max-width: 210px;
    border: 1px solid #fff;
}

.footer .sitemap li {
    margin-top: 25px;
}

.footer .sitemap li:first-child {
    margin-top: 0;
}

.footer .sitemap li a {
    color: #fff;
    opacity: 0.64;
}

.footer .sitemap li a.clearly {
    opacity: 1;
}

.footer .sitemap li a:hover {
    opacity: 0.8;
}

.footer .banner {
    text-align: center;
    max-width: 192px;
}

.footer .banner .toShop {
    max-width: 150px;
    margin: 0 auto;
    -webkit-transition: 0.3s all 0s ease;
    transition: 0.3s all 0s ease;
}

.footer .banner .toShop:hover {
    opacity: 0.7;
}

.footer .banner .SDGs {
    max-width: 150px;
    margin: 25px auto 0;
}

.footer .banner .SDGs p {
    font-size: 0.8rem;
}

.footer .banner .SDGs .image {
    margin-top: 5px;
}

.footer .banner .copyright {
    margin-top: 30px;
    font-size: 9px;
}

.footer .banner .language{
    margin: 25px auto;
}
.footer .banner .language a{
    color: #fff;
    border-bottom: 1px #fff dotted;
}

@media screen and (max-width: 1024px) {
    .footer-bottom {
        padding: 20px;
    }
    .footer .info {
        max-width: 185px;
    }
    .footer .info__address {
        font-size: 0.6rem;
    }
    .footer .info__address .icon {
        width: 10px;
    }
    .footer .info__tel .number {
        /* font-size: 1rem; */
        margin-top: 10px;
    }
    .footer .info__tel .number .icon {
        width: 15px;
        margin-right: 5px;
    }
    .footer .info__tel .time {
        font-size: 0.6rem;
    }
    .footer .banner {
        max-width: 140px;
    }
    .footer .banner .SDGs {
        margin-top: 10px;
    }
    .footer .banner .SDGs p {
        font-size: 0.6rem;
    }
    .footer .banner .SDGs .image {
        margin-top: 0;
    }
    .footer .banner .copyright {
        margin-top: 10px;
    }
}

@media screen and (max-width: 767px) {
    .footer-top {
        max-width: 80%;
        margin: 0 auto;
    }
    .footer-top .right {
        margin-top: 20px;
    }
    .footer-bottom {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .footer .info {
        max-width: 100%;
        margin: 0 auto;
    }
    .footer .sitemap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        max-width: 350px;
        width: 100%;
        margin: 20px auto 0;
    }
    .footer .sitemap li {
        margin-top: 10px;
        margin-right: 10px;
        text-align: center;
        width: calc(50% - 10px * 1/2);
    }
    .footer .sitemap li a {
        width: 100%;
        display: block;
        border: 1px solid #fff;
        padding: 10px 0;
        opacity: 1;
        background-color: #000040;
    }
    .footer .sitemap li a:hover {
        background-color: #fff;
        color: #000040;
    }
    .footer .sitemap li a.clearly {
        color: #000040;
        background-color: #fff;
    }
    .footer .sitemap li a.clearly:hover {
        color: #fff;
        background-color: #000040;
    }
    .footer .sitemap li:nth-child(1), .footer .sitemap li:nth-child(2) {
        margin-top: 0;
    }
    .footer .sitemap li:nth-child(2n) {
        margin-right: 0;
    }
    .footer .banner {
        max-width: 80%;
        width: 100%;
        margin: 30px auto 0;
    }
    .footer .banner .toShop,
    .footer .banner .SDGs {
        max-width: 100%;
    }
    .footer .banner .SDGs p {
        font-size: 0.8rem;
    }
}

.content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media screen and (max-width: 767px) {
    .content {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .content .left,
    .content .right {
        width: 100% !important;
        margin-bottom: 20px;
    }
}

/* ------------- 固定ページファーストビュー ------------- */
.subFv {
    height: 350px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 180px 0 20px 0;
}

.subFv .title {
    color: #fff;
    font-size: 2rem;
    letter-spacing: 0.2em;
}

.subFv .title span {
    display: block;
    font-size: 0.9rem;
    padding-left: 80px;
    position: relative;
    letter-spacing: 0;
}

.subFv .title span::before {
    content: '';
    position: absolute;
    display: block;
    width: 70px;
    height: 1px;
    background-color: #fff;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0;
}

.subFv .title_en {
    color: #fff;
    font-size: 2.2rem;
    letter-spacing: 0.1em;
}

.subFv .title_en span {
    display: block;
    font-size: 0.9rem;
    padding-left: 80px;
    position: relative;
    letter-spacing: 0;
}

.subFv .title_en span::before {
    content: '';
    position: absolute;
    display: block;
    width: 70px;
    height: 1px;
    background-color: #fff;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0;
}

.subFv .breadcrumb {
    margin-top: 60px;
    color: #fff;
    text-align: right;
}

.subFv .breadcrumb a {
    color: #fff;
}

.subFv .breadcrumb a:hover {
    opacity: 0.7;
}

.subFv.navy a,
.subFv.navy .title,
.subFv.navy .title_en,
.subFv.navy .breadcrumb {
    color: #000040;
}

.subFv.navy .white a{
    color: #fff;
} 

.subFv.navy .title span::before {
    background-color: #000040;
}

.subFv.navy .title_en span::before {
    background-color: #000040;
}

@media screen and (max-width: 1024px) {
    .subFv {
        height: 250px;
        padding-top: 80px;
    }
}

@media screen and (max-width: 767px) {
    .subFv {
        height: 180px;
        padding-top: 30px;
    }
    .subFv .title {
        font-size: 1.5rem;
    }
    .subFv .title span {
        font-size: 0.7rem;
        padding-left: 60px;
    }
    .subFv .title span::before {
        width: 50px;
    }
}

.subFv .title_en {
    font-size: 2.2rem;
    font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
    letter-spacing: 0;
}
.subFv .title_en span {
    font-size: 0.7rem;
    padding-left: 60px;
}
.subFv .title_en span::before {
    width: 50px;
}
}

.fvTop.pc {
    display: block;
}

@media screen and (max-width: 820px) {
    .fvTop.pc {
        display: none !important;
    }
}

.fvTop.sp {
    display: none;
}

@media screen and (max-width: 820px) {
    .fvTop.sp {
        display: block !important;
    }
}
#top{
    margin-bottom: 30px
}



/* ------------- カード・4カラム ------------- */
.card_04 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.card_04 .card {
    width: calc(25% - 40px * 3/4);
    margin-right: 40px;
}

.card_04 .card:nth-child(4n) {
    margin-right: 0;
}

@media screen and (max-width: 767px) {
    .card_04 .card {
        width: 100%;
        margin-right: 0;
        margin-top: 30px;
    }
    .card_04 .card:nth-child(1) {
        margin-top: 0px;
    }
}


/* ------------- カード・4カラム #syouyaku------------- */
#syouyaku .card_04 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

#syouyaku .card_04 .card {
    width: calc(25% - 20px * 3/4);
    margin-right: 20px;
    border: solid 1px #cfcfcf;
}

#syouyaku .card_04 .card .image {
    padding:0;
}

#syouyaku .card_04 .card h3 {
    padding-top:15px;
}

#syouyaku .card_04 .card p {
    margin: 0 auto;
    padding: 0.7rem;
}


#syouyaku .card_04 .card:nth-child(4n) {
    margin-right: 0;
}

#syouyaku .card_04 .card .Link  {
    margin-bottom: 15px;
}

#syouyaku .card_04 .card .Link a  {
    margin:auto 0;
}

#syouyaku .card_04 .card .effect {
    margin: 0;
}

@media screen and (max-width: 767px) {
    #syouyaku .card_04 .card {
        width: 100%;
        margin-right: 0;
        margin-top: 30px;
    }
    .card_04 .card:nth-child(1) {
        margin-top: 0px;
    }
}



/* ------------- カード・3カラム ------------- */
.card_03 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.card_03 .card {
    width: calc(33.33333% - 40px * 2/3);
    margin-right: 40px;
    margin-top: 40px;
    padding: 10px 20px 30px;
    /* margin: 0 10px; */
}

#top .card_03 .card {
    width: calc(33.33333% - 40px * 2/3);
    margin-right: 40px;
    margin-top: 40px;
    padding: 1px 2px 3px;
    /* margin: 0 10px; */
}

.card_03 .card:nth-child(1), .card_03 .card:nth-child(2), .card_03 .card:nth-child(3) {
    margin-top: 0;
}

.card_03 .card:nth-child(3n) {
    margin-right: 0;
}

@media screen and (max-width: 767px) {
    .card_03 .card {
        width: 100%;
        margin-right: 0;
        margin-top: 20px;
    }
    .card_03 .card:nth-child(2), .card_03 .card:nth-child(3) {
        margin-top: 20px;
    }
}

/* ------------- カード・2カラム ------------- */
.card_02 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.card_02 a:hover{
    opacity: 0.7;
}

.card_02 .card {
    width: calc(50% - 60px * 1/2);
    /* margin-left: 60px; */
    margin-top: 60px;
}

.en-top .card_02 .card{
    width: calc(50% - 60px * 1/2);
    /* margin-left: 60px; */
    margin-top: 60px;
    border: 1px #ddd solid;
    padding: 1%;
    margin: 15px;
}
@media screen and (max-width: 600px) {
    .en-top .card_02 .card{
        width: 90%;
    }
}

.en-top .card_02 .card p{
    margin-top: 2%;
    /* display: inline; */
    position: relative;
    line-height: 2rem;
    padding: 0 1rem;
}

.en-top .card_02 .card p::before,
.en-top .card_02 .card p::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    bottom: 0;
    margin: auto;
}
.en-top .card_02 .card p:before {
    right: 1px;
    width: 25px;
    height: 25px;
    margin-top: -13px;
    border-radius: 50px;
    border: solid 1px #000;
}
.en-top .card_02 .card p:after {
    right: 11px;
    width: 10px;
    height: 10px;
    margin-top: -6px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    transform: rotate(45deg);
}

.card_02 .card:nth-child(1), .card_02 .card:nth-child(2) {
    /* margin-top: 0; */
}

.card_02 .card:nth-child(2n-1) {
    /* margin-left: 0; */
}

@media screen and (max-width: 767px) {
    .card_02 {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .card_02 .card {
        width: 100%;
        margin-left: 0;
        margin-top: 30px;
    }
    .card_02 .card:nth-child(2) {
        margin-top: 30px;
    }
}

/* ------------- トップへ戻るボタン ------------- */
.totop {
    width: 40px;
    height: 40px;
    position: fixed;
    right: 110px;
    bottom: 12px;
    z-index: 15;
    -webkit-transition: 0.3s all 0s ease;
    transition: 0.3s all 0s ease;
    display: none;
}

@media screen and (max-width: 1024px) {
    .totop {
        right: 20px;
    }
}

@media screen and (max-width: 767px) {
    .totop {
        right: 10px;
        bottom: 10px;
    }
}

/* ------------- ぱんくずリスト ------------- */
.breadcrumb {
    font-size: 10px;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.breadcrumb .page {
    padding: 0 5px;
    padding-bottom: 3px;
}

.breadcrumb .underline {
    border-bottom: 1px dotted #fff;
    padding-bottom: 2px;
}

.breadcrumb .arrow {
    padding: 0 5px;
}

.breadcrumb .TOP {
    position: relative;
    padding-left: 20px;
    color: #fff;
}

.breadcrumb .TOP::before {
    content: '';
    position: absolute;
    display: block;
    width: 14px;
    height: 11px;
    background-image: url(../img/parts/icon-top.png);
    background-size: cover;
    left: 0px;
}

.navy .breadcrumb {
    color: #000040;
}

.navy .breadcrumb .underline {
    border-bottom: 1px dotted #000040;
}

.navy .breadcrumb .TOP {
    color: #000040;
}

.navy .breadcrumb.white {
    color: #fff;
}

.navy .breadcrumb.white .underline {
    border-bottom: 1px dotted #fff;
}

.navy .breadcrumb.white .TOP {
    color: #fff;
}

.navy .breadcrumb .TOP::before {
    background-image: url(../img/parts/icon-top_paint.png);
    width: 15px;
    height: 12px;
}

.navy .breadcrumb.white .TOP::before {
    background-image: url(../img/parts/icon-top.png);
    width: 15px;
    height: 12px;
}

/* ------------- ボタン ------------- */
.btn a {
    background-color: #000040;
    color: #fff;
    display: inline-block;
    position: relative;
    line-height: 40px;
    border-radius: 100px;
    -webkit-transition: 0.3s all 0s ease;
    transition: 0.3s all 0s ease;
    border: 1px solid #000040;
    text-align: center;
    font-size: 1rem;
    max-width: 360px;
    width: 100%;
}

.btn a::after {
    content: '';
    position: absolute;
    display: block;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 20px;
    width: 20px;
    height: 20px;
    background-image: url(../img/white-arrow-btn.svg);
    background-size: cover;
    -webkit-transition: 0.3s all 0s ease;
    transition: 0.3s all 0s ease;
}

.btn a:hover {
    background-color: #fff;
    color: #000040;
}

.btn a:hover::after {
    background-image: url(../img/red-arrow-btn.svg);
}

@media screen and (max-width: 767px) {
    .btn a,
    .btn input {
        max-width: 313px;
        font-size: 1rem;
        line-height: 1.5;
        padding: 22px 0 21px;
    }
}

/* ------------- スクエアボタン ------------- */
.btnSquare a {
    background-color: #fff;
    color: #000040;
    display: inline-block;
    position: relative;
    line-height: 54px;
    -webkit-transition: 0.3s all 0s ease;
    transition: 0.3s all 0s ease;
    border: 1px solid #3f3f3f;
    text-align: center;
    font-size: 1.25rem;
    max-width: 260px;
    width: 100%;
    font-family: "ヒラギノ明朝 pro", "游明朝", "Yu Mincho", "YuMincho", "yumincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "メイリオ", "Meiryo", serif;
}

.btnSquare a::after {
    content: '';
    position: absolute;
    display: block;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 20px;
    width: 5px;
    height: 9px;
    background-image: url(../img/parts/arrow-right.png);
    background-size: cover;
    -webkit-transition: 0.3s all 0s ease;
    transition: 0.3s all 0s ease;
}

.btnSquare a:hover {
    background-color: #000040;
    color: #fff;
}

.btnSquare a.paint {
    background-color: #000040;
    color: #fff;
}

.btnSquare a.paint::before, .btnSquare a.paint::after {
    content: '';
    position: absolute;
    display: block;
    background-color: #fff;
    width: 6px;
    height: 1px;
    top: 50%;
}

.btnSquare a.paint::before {
    -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
    right: 7px;
}

.btnSquare a.paint::after {
    -webkit-transform: translateY(-50%) rotate(-45deg);
    transform: translateY(-50%) rotate(-45deg);
    right: 3px;
}

.btnSquare a.paint:hover {
    background-color: #fff;
    color: #000040;
}

.btnSquare a.paint:hover::before {
    background-color: #000040;
}

.btnSquare a.paint:hover::after {
    background-color: #000040;
}

@media screen and (max-width: 767px) {
    .btn a,
    .btn input {
        max-width: 313px;
        font-size: 1rem;
        line-height: 1.5;
        padding: 22px 0 21px;
    }
}

/* ------------- 角丸ボタン ------------- */
.btnRound {
    text-align: center;
}
.btnRound a {
    background-color: #000040;
    color: #fff;
    display: inline-block;
    position: relative;
    line-height: 65px;
    -webkit-transition: 0.3s all 0s ease;
    transition: 0.3s all 0s ease;
    border: 1px solid #000040;
    text-align: center;
    font-size: 1.25rem;
    max-width: 470px;
    width: 100%;
    font-family: "ヒラギノ明朝 pro", "游明朝", "Yu Mincho", "YuMincho", "yumincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "メイリオ", "Meiryo", serif;
    border-radius: 10px;
}

.btnRound a:hover {
    background-color: #fff;
    color: #000040;
}

.btnRound a.arrow::before, .btnRound a.arrow::after {
    content: '';
    position: absolute;
    display: block;
    background-color: #fff;
    width: 6px;
    height: 1px;
    right: 15px;
}

.btnRound a.arrow::before {
    -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
    top: 46%;
}

.btnRound a.arrow::after {
    -webkit-transform: translateY(-50%) rotate(-45deg);
    transform: translateY(-50%) rotate(-45deg);
    top: 54%;
}

.btnRound a.arrow:hover::before {
    background-color: #000040;
}

.btnRound a.arrow:hover::after {
    background-color: #000040;
}

.btnRound a.pdf::before {
    content: '';
    position: absolute;
    display: block;
    background-image: url(../img/parts/icon-pdf.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 15px;
    height: 14px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 15px;
}

@media screen and (max-width: 1024px) {
    .btnRound a {
        font-size: 1rem;
        line-height: 50px;
    }
}

/* ------------- ボタンの丸矢印 ------------- */
/* ------------- 詳細を見る ------------- */
.Link {
    text-align: center;
    max-width: 142px;
    width: 100%;
    margin: 10px auto 0;
    border-bottom: 1px dashed #363636;
}

.Link a {
    color: #363636;
    font-family: 'ヒラギノ明朝 ProN';
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.Link a span {
    width: 4px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: 10px;
}

/* ------------- 青い影付きのボックス ------------- */
.btnBlueBox {
    border: 3px solid #000040;
    -webkit-box-shadow: 8px 6px #000040;
    box-shadow: 8px 6px #000040;
    border-radius: 25px;
}

/* ------------- フッターの上のお問い合わせ ------------- */
#contact .inner {
    max-width: 700px;
}

#contact .inner h2 {
    font-size: 1.4rem;
    line-height: 2;
    font-weight: bold;
    font-family: 'ヒラギノ角ゴ pro';
    text-align: center;
    color: #363636;
}

#contact .inner .txt {
    text-align: center;
    margin-bottom: 40px;
    font-size: 1.05rem;
}

#contact .content {
    -webkit-box-align: normal;
    -ms-flex-align: normal;
    align-items: normal;
    margin-top: 20px;
}

#contact .content .left,
#contact .content .right,
#contact .content .center{
    width: calc(50% - 20px * 1/2);
    text-align: center;
    border: 1px solid #b5b5b5;
}

#contact .content .left a,
#contact .content .right a,
#contact .content .center a{
    padding: 20px;
    display: block;
    -webkit-transition: 0.3s all 0s ease;
    transition: 0.3s all 0s ease;
}

#contact .content .left p,
#contact .content .right p,
#contact .content .center p{
    color: #000040;
}

#contact .content .left:hover,
#contact .content .right:hover,
#contact .content .center:hover{
    background-color: #000040;
    color: #fff;
    -webkit-transition: 0.3s all 0s ease;
    transition: 0.3s all 0s ease;
}
#contact .content .left p:hover,
#contact .content .right p:hover,
#contact .content .center p:hover{
    color: #fff;
}


#contact .content .left {
    margin-right: 20px;
}

#contact .content .icon {
    width: 36px;
    margin: 0 auto;
}

#contact .content .left p {
    font-family: 'ヒラギノ明朝 pro';
    font-size: 1.8rem;
    font-weight: bold;
    margin-top: 10px;
}

#contact .content .right p {
    margin-top: 20px;
}

@media screen and (max-width: 767px) {
    #contact .content .right {
        margin-top: 10px;
    }
}





#contact .message {
    text-align: center;
    max-width: 1000px;
    margin: 10px auto;
}

#contact .message h2 {
    font-size: 2rem;
    font-weight: bold;
}

#contact .message p {
    margin-top: 40px;
    line-height: 2;
}
#contact .message p a {
    -webkit-transition: 0.3s all 0s ease;
    transition: 0.3s all 0s ease;
    border-bottom: 1px dotted #858585;
    padding: 0 3px;
    margin: 0 5px;
}
#contact .message p a:hover {
    color: #7fc2df;
    border-bottom: 2px dotted #7fc2df;
}

#contact .message .solid-box{
    border: 1px solid #b5b5b5;
    height: 200px;
    margin: 0 5%;
    width: 40%;
}

@media screen and (max-width: 767px) {
    #contact .message h2 {
        font-size: 1.5rem;
    }
    #contact .message p {
        margin-top: 30px;
        line-height: 1.8;
    }
    #contact .message .btnRound {
        margin-top: 10px;
    }
    #contact .message .solid-box{
        margin: 5%;
        width: 90%;
    }
}

.message .info__tel .number {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    /*     color: #fff; */
    font-size: 2rem;
    margin-top: 18px;
    -webkit-transition: 0.3s all 0s ease;
    transition: 0.3s all 0s ease;
    font-family: "ヒラギノ明朝 pro", "游明朝", "Yu Mincho", "YuMincho", "yumincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "メイリオ", "Meiryo", serif;
    font-weight: 600;
}

.message .info__tel .number:hover {
    opacity: 0.7;
}

.message .info__tel .number .icon {
    width: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}


#campaign .inner {
    max-width: 1130px;
}

#campaign .inner h2 {
    font-size: 1.4rem;
    line-height: 2;
    font-weight: bold;
    /*font-family: 'ヒラギノ角ゴ pro';*/
    text-align: center;
    color: #363636;
}

#campaign .inner .txt {
    text-align: center;
    margin-bottom: 40px;
    font-size: 1.05rem;
}

#campaign .content {
    -webkit-box-align: normal;
    -ms-flex-align: normal;
    align-items: normal;
    margin-top: 20px;
}

#campaign .content .left,
#campaign .content .right {
    width: calc(50% - 20px * 1/2);
    text-align: center;
    border: 1px solid #b5b5b5;
}

#campaign .content .left a,
#campaign .content .right a {
    padding: 20px;
    display: block;
    -webkit-transition: 0.3s all 0s ease;
    transition: 0.3s all 0s ease;
}

#campaign .content .left p,
#campaign .content .right p {
    color: #000040;
}

#campaign .content .left:hover,
#campaign .content .right:hover {
    background-color: #000040;
    color: #fff;
    -webkit-transition: 0.3s all 0s ease;
    transition: 0.3s all 0s ease;
}
#campaign .content .left p:hover,
#campaign .content .right p:hover {
    color: #fff;
}


#campaign .content .left {
    margin-right: 20px;
}

#campaign .content .icon {
    width: 36px;
    margin: 0 auto;
}

#campaign .content .left p {
    font-family: 'ヒラギノ明朝 pro';
    font-size: 1.8rem;
    font-weight: bold;
    margin-top: 10px;
}

#campaign .content .right p {
    margin-top: 20px;
}

@media screen and (max-width: 767px) {
    #campaign .content .right {
        margin-top: 10px;
    }
}





#campaign .message h2 {
    font-size: 2rem;
    font-weight: bold;
}

#campaign .message p {
    margin-top: 40px;
    line-height: 2;
}

@media screen and (max-width: 767px) {
    #campaign .message h2 {
        font-size: 1.5rem;
    }
    #campaign .message p {
        margin-top: 30px;
        line-height: 1.8;
    }
}








/* ------------- 生薬一覧 ------------- */
#self-product .image {
    padding: 0 10px;
}

#self-product .title {
    text-align: center;
}

#self-product .title h3 {
    font-size: 1.3rem;
    line-height: 1.7;
    font-weight: bold;
    font-family: "ヒラギノ角ゴシック", "ヒラギノ角ゴシック pro", sans-serif;
    color: #000;
}

#self-product .title span {
    font-size: 0.9rem;
    line-height: 2;
    border: 1px solid #000;
    padding: 3px 5px;
}

#self-product .effect {
    margin-top: 20px;
}

#self-product .effect h4 {
    font-family: "ヒラギノ明朝 pro", "游明朝", "Yu Mincho", "YuMincho", "yumincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "メイリオ", "Meiryo", serif;
    color: #878787;
}

#self-product .effect p {
    color: #000040;
    line-height: 1.9;
    margin-top: 5px;
}

#self-product.card_02 {
    max-width: 1000px;
    margin: 30px auto 0;
}

#self-product.card_02 li {
    width: calc(33% - 50px * 2/3);
    margin-left: 50px;
}

#self-product.card_02 li:nth-child(3n-2) {
    margin-left: 0;
}

@media screen and (max-width: 767px) {
    #self-product .image {
        padding: 0 60px;
    }
    #self-product .effect p {
        line-height: 1.7;
        font-size: 0.9rem;
    }
    #self-product.card_02 li {
        width: 100%;
        margin-left: 0;
    }
}

#top .inner {
    max-width: 1000px;
}

#top .bnrarea{
    margin: 0 auto 60px;
    text-align:center;
}

#top .peace h2{
    font-size: 2rem;
    font-weight: bold;
    color: #878787;
}

#top .card_03 .card {
    width: calc(33.3333% - 15px * 2/3);
    margin-right: 15px;
    margin-top: 20px;
    -webkit-transition: 0.3s all 0s ease;
    transition: 0.3s all 0s ease;
}

#top .card_03 .card:nth-child(1), #top .card_03 .card:nth-child(2), #top .card_03 .card:nth-child(3) {
    margin-top: 0;
}

#top .card_03 .card:nth-child(3n) {
    margin-right: 0;
}

#top .card_03 .card:hover {
    opacity: 0.7;
}

#top .card_03 p {
    padding-left: 45px;
    position: relative;
    line-height: 2;
    top: 2px;
}

#top .card_03 p::before {
    content: '';
    position: absolute;
    display: block;
    background-color: #727272;
    left: 0;
    top: 16px;
    width: 40px;
    height: 1px;
}

@media screen and (max-width: 767px) {
    #top .card_03 .card {
        width: calc(50% - 10px * 1/2);
        margin-right: 10px;
    }
    #top .card_03 .card:nth-child(3n) {
        margin-right: 10px;
    }
    #top .card_03 .card:nth-child(2n) {
        margin-right: 0;
    }
    #top .card_03 .card:nth-child(n+3) {
        margin-top: 25px;
    }
    #top .card_03 p {
        line-height: 1.5;
        padding-left: 0;
        text-align: center;
        margin-top: 10px;
    }
    #top .card_03 p::before {
        display: none;
    }
}

.news h2{
    font-size: 1.2rem;
    font-family: "ヒラギノ角ゴシック", "ヒラギノ角ゴシック pro", sans-serif;
    letter-spacing: 0.1rem;
}

.season_shoyaku{
    color:#626262;
    text-align: center;
    padding: 10px 5px 5px 5px;
}

.season_shoyaku a{
    color:#000040;
    padding: 5px;
    border-bottom: 1px dashed #626262;
}

.season_shoyaku a:before{
    font-family: 'themify';
    content: "\e67c";
    font-size: 1.3em;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    color: #000040;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 10px;
    line-height: 0.5;
    position: relative;
    top: 3px;
}

.news .left {
    width: calc(100% - 360px);
}

.news .right {
    width: 340px;
    margin-left: 20px;
    background-color: #dedede;
    padding: 10px;
}

@media screen and (max-width: 767px) {
    .news .right {
        margin-left: 0;
    }
}

.product .left,
.product .right {
    width: 50%;
}

.product .right {
    text-align: center;
}

.product .right h2{
    font-size: 1.2rem;
    font-family: "ヒラギノ角ゴシック", "ヒラギノ角ゴシック pro", sans-serif;
}

.product .right p {
    margin-top: 20px;
    line-height: 2;
}

.product .right .btn {
    margin: 30px auto 0;
}

.peace .btnRound {
    margin: 30px auto 0;
}

.product .right .btn a {
    margin: 0 auto;
    max-width: 250px;
}

@media screen and (max-width: 767px) {
    .product .right .btn a {
        padding: 10px 0;
    }
    .product .right p {
        line-height: 1.8;
    }
}


#top .banner .inner {
    max-width: 870px;
}

#top .banner .inner .left,
#top .banner .inner .right {
    width: calc(50% - 90px * 1/2);
    -webkit-transition: 0.3s all 0s ease;
    transition: 0.3s all 0s ease;
}

#top .banner .inner .left:hover,
#top .banner .inner .right:hover {
    opacity: 0.7;
}

#top .banner .inner .left {
    margin-right: 90px;
}

@media screen and (max-width: 1024px) {
    #top .banner .inner .left,
    #top .banner .inner .right {
        width: calc(50% - 20px * 1/2);
    }
    #top .banner .inner .left {
        margin-right: 20px;
    }
}

@media screen and (max-width: 767px) {
    #top .banner .inner .left {
        margin-right: 0;
        margin-bottom: 10px;
    }
}

.fvCompany {
    background-image: url(../img/company/fvCompany.png);
}

/* 会社概要 */
#company .message {
    text-align: center;
}

#company .message h2 {
    font-size: 2rem;
    font-weight: bold;
}

#company .message p {
    margin-top: 40px;
    line-height: 2;
}

.companyInfo .inner p{
    margin-top: 20px;
    line-height: 2;
}

@media screen and (max-width: 767px) {
    #company .message h2 {
        font-size: 1.5rem;
    }
    #company .message p {
        margin-top: 30px;
        line-height: 1.8;
    }
}

.companyInfo h3 {
    color: #878787;
    font-size: 1.75rem;
    margin-bottom: 30px;
}

.companyInfo .content {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    margin-top: 20px;
}

.companyInfo .left {
    width: calc(40% - 20px);
    margin-right: 20px;
}

.companyInfo .left.w60 {
    width: calc(60% - 20px);
    margin-right: 20px;
}

.companyInfo .right {
    width: 60%;
}

.companyInfo .right.w40 {
    width: 40%;
}

.companyInfo .movie_box {
    padding: 15px;
    border: 1px solid #b5b5b5;
    margin-top: 20px;
}

.companyInfo .movie-iframe-wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    /* = height ÷ width × 100 */
}

.companyInfo .movie-iframe-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.companyInfo table {
    border-collapse: collapse;
    width: 100%;
}

.companyInfo table th, .companyInfo table td {
    border-bottom: 1px solid #c6d5d7;
    padding: 15px;
    line-height: 1.8;
}

.companyInfo table th {
    width: 30%;
    text-align: left;
}

.companyInfo table td {
    width: 70%;
}

.companyInfo table .border-none {
    border-bottom: none;
}

.companyInfo table a {
    -webkit-transition: 0.3s all 0s ease;
    transition: 0.3s all 0s ease;
    border-bottom: 1px dotted #858585;
    padding: 0 3px;
    margin: 0 5px;
}

.companyInfo table a:hover {
    color: #7fc2df;
    border-bottom: 2px dotted #7fc2df;
}

.companyInfo .btnSquare {
    margin-top: 40px;
    text-align: center;
}

.companyInfo h4 {
    color: #608798;
    font-size: 1.2rem;
}
.companyInfo h4:before {
    font-family: 'themify';
    content: "\e6a8";
    padding-right: 10px;
    font-size: 1em;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media screen and (max-width: 767px) {
    .movie_box {
        padding: 10px;
    }
}

.companyMap .inner {
    max-width: 980px;
}

.companyMap .map_box {
    padding: 20px;
    border: 1px solid #b5b5b5;
}

.companyMap .map_box .btnSquare {
    text-align: right;
    margin-top: 10px;
}

.companyMap .map_box .btnSquare a {
    font-size: 1rem;
    line-height: 44px;
}

.companyMap .map-iframe-wrap {
    position: relative;
    width: 100%;
    padding-top: 35.16%;
    /* = height ÷ width × 100 */
}

.companyMap .map-iframe-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 767px) {
    .companyMap .map_box {
        padding: 10px;
        border: 1px solid #b5b5b5;
    }
    .companyMap .map-iframe-wrap {
        position: relative;
        width: 100%;
        padding-top: 75%;
    }
}

.companyMap .btnRound {
    text-align: center;
    margin-top: 90px;
}

.fvHistory {
    background-image: url(../img/history/fvHistory.png);
}

@media screen and (max-width: 767px) {
    .fvHistory .title {
        font-size: 1rem;
    }
}

#history {
    font-family: 'ヒラギノ角ゴ pro', 'ヒラギノ角ゴシック', sans-serif;
}

#history h2 {
    font-size: 1.4rem;
    line-height: 2;
    font-weight: bold;
    font-family: 'ヒラギノ角ゴ pro', 'ヒラギノ角ゴシック', sans-serif;
}

#history .kuwasiku .content h2{
    font-family:"ヒラギノ明朝 pro", "游明朝", "Yu Mincho", "YuMincho", "yumincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "メイリオ", "Meiryo", serif;
    color: #687dae;
}

#history p {
    line-height: 2;
}

#history .kuwasiku .content p{
    color: #1f1f4e;
}

#history p.des {
    line-height: 1.5;
    color: #737373;
    font-size: 0.9rem;
    margin-top: 10px;
}

#history .left {
    width: 60%;
    margin-right: 20px;
}

#history .right {
    width: calc(40% - 20px);
}

@media screen and (max-width: 767px) {
    #history h2 {
        font-size: 1.2rem;
    }
    #history p {
        line-height: 1.8;
    }
    #history .left {
        margin-right: 0;
    }
    #history .right {
        margin-top: 20px;
    }
}

#history .year {
    position: relative;
}

#history .year .year_box {
    position: absolute;
    top: -50px;
    right: 0;
}

#history .year .year_num {
    font-size: 1.85rem;
    color: #ffcb7c;
    font-style: italic;
    font-family: "ヒラギノ明朝 pro", "游明朝", "Yu Mincho", "YuMincho", "yumincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "メイリオ", "Meiryo", serif;
    position: relative;
}

#history .year .year_num::before {
    content: '';
    position: absolute;
    display: block;
    width: 60px;
    height: 1px;
    background-color: #ffcb7c;
    right: 103%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

@media screen and (max-width: 767px) {
    #history .year .year_box {
        top: -35px;
    }
    #history .year .year_num {
        font-size: 1.5rem;
    }
}

.kuwasiku .content {
    background-color: #f0f0f0;
    margin: 0 10px;
    padding: 30px;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
}

.kuwasiku .title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.kuwasiku .title .icon-kuwasiku {
    max-width: 254px;
    width: 100%;
    margin-right: 15px;
}

@media screen and (max-width: 1024px) {
    .kuwasiku .content {
        margin: 0;
        padding: 20px;
    }
    .kuwasiku .title .icon-kuwasiku {
        max-width: 200px;
    }
}

@media screen and (max-width: 767px) {
    .kuwasiku .title {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: start;
    }
    .kuwasiku .title .icon-kuwasiku {
        max-width: 180px;
        margin-right: 0;
    }
}

.koborebanashi .wrapper {
    background-color: #f5faff;
    border-left: 10px solid #95b5ff;
    border-right: 10px solid #95b5ff;
    padding: 15px;
    -webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
}

.koborebanashi .wrapper .title {
    max-width: 392px;
    width: 100%;
    margin-bottom: 10px;
}

.koborebanashi .wrapper span.catch{
    font-weight: 600;
    color: #000040;
}

@media screen and (max-width: 767px) {
    .koborebanashi .wrapper {
        border-left: 5px solid #95b5ff;
        border-right: 5px solid #95b5ff;
    }
}

#history .message_box {
    text-align: center;
}

#history .message_box p {
    display: inline-block;
    font-size: 1.25rem;
    font-family: "ヒラギノ明朝 pro", "游明朝", "Yu Mincho", "YuMincho", "yumincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "メイリオ", "Meiryo", serif;
    line-height: 2;
    position: relative;
}

#history .message_box p::before, #history .message_box p::after {
    content: '';
    position: absolute;
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
    top: -10px;
}

#history .message_box p::before {
    background-image: url(../img/history/catchcopyLeft.png);
    left: -100px;
    width: 92px;
    height: 126px;
}

#history .message_box p::after {
    background-image: url(../img/history/catchcopyRight.png);
    right: -100px;
    width: 82px;
    height: 141px;
}

@media screen and (max-width: 767px) {
    #history .message_box p {
        font-size: 1rem;
        line-height: 1.8;
    }
    #history .message_box p::before, #history .message_box p::after {
        top: -20px;
        display: none;
    }
    #history .message_box p::before {
        width: 80px;
        height: 109px;
    }
    #history .message_box p::after {
        width: 70px;
        height: 119px;
    }
}

.kigentodenrai .year.mt {
    margin-top: 60px;
}

.kigentodenrai .blue_bg {
    background-color: #edf4ff;
    color: #000040;
    font-family: "ヒラギノ明朝 pro", "游明朝", "Yu Mincho", "YuMincho", "yumincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "メイリオ", "Meiryo", serif;
    font-style: italic;
    line-height: 1.5;
    font-weight: bold;
    padding: 10px;
    margin: 10px 0;
}

#history .ontaketoha .left {
    width: calc(100% - 265px);
    margin-right: 20px;
}

#history .ontaketoha .left p {
    margin-top: 20px;
}

#history .ontaketoha .right {
    width: 245px;
}

#history .ontaketoha .btnRound {
    text-align: center;
    margin-top: 60px;
}

@media screen and (max-width: 1024px) {
    #history .ontaketoha .left {
        width: calc(100% - 220px);
    }
    #history .ontaketoha .right {
        width: 200px;
    }
}

@media screen and (max-width: 767px) {
    #history .ontaketoha .left {
        margin-right: 0;
    }
}

@media screen and (max-width: 767px) {
    #history .kakawari h2 {
        line-height: 1.2;
    }
    #history .kakawari .year {
        margin-top: 10px;
    }
}

.tanjou .koborebanashi {
    margin: 0 15px;
    margin-top: 35px;
}

.tanjou .btnRound {
    text-align: center;
    margin-top: 60px;
}

@media screen and (max-width: 767px) {
    .tanjou .koborebanashi {
        margin: 20px 0 0;
    }
}

#history .ishibumi .content.top .left {
    width: calc(100% - 415px);
    margin-right: 15px;
}

#history .ishibumi .content.top .right {
    width: 400px;
}

#history .ishibumi .content.bottom {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    margin-top: -110px;
}

#history .ishibumi .content.bottom .right {
    width: 640px;
    margin-right: 40px;
}

#history .ishibumi .content.bottom .left{
    width: calc(100% - 640px);
}

@media screen and (max-width: 1024px) {
    #history .ishibumi .content.top .left {
        width: calc(100% - 315px);
    }
    #history .ishibumi .content.top .right {
        width: 300px;
    }
    #history .ishibumi .content.bottom {
        margin-top: -150px;
    }
    #history .ishibumi .content.bottom .left {
        width: 370px;
        margin-right: 20px;
    }
    #history .ishibumi .content.bottom .right {
        width: calc(100% - 390px);
    }
}

@media screen and (max-width: 767px) {
    #history .ishibumi .content.top .left {
        margin-right: 0;
    }
    #history .ishibumi .content.bottom {
        margin-top: 0;
    }
    #history .ishibumi .content.bottom .left {
        margin-right: 0;
    }
}

#history .word p {
    text-align: center;
    font-size: 1.2rem;
    font-family: "ヒラギノ明朝 pro", "游明朝", "Yu Mincho", "YuMincho", "yumincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "メイリオ", "Meiryo", serif;
    font-weight: bold;
}

.bannerHisotry .content .left, .bannerHisotry .content .right {
    width: 50%;
    height: 213px;
    margin: 0 10px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    -webkit-transition: 0.3s all 0s ease;
    transition: 0.3s all 0s ease;
}

.bannerHisotry .content .left:hover, .bannerHisotry .content .right:hover {
    opacity: 0.7;
}

.bannerHisotry .content .left p, .bannerHisotry .content .right p {
    color: #fff;
    font-size: 2.5rem;
    font-weight: bold;
    font-family: "ヒラギノ明朝 pro", "游明朝", "Yu Mincho", "YuMincho", "yumincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "メイリオ", "Meiryo", serif;
    line-height: 50px;
    text-shadow: 0px 0px 5px #000;
    display: block;
}

.bannerHisotry .content .leftHistory {
    background-image: url(../img/history/toNenpyou.png);
}

.bannerHisotry .content .rightHistory {
    background-image: url(../img/history/toAyumi.png);
}

@media screen and (max-width: 1024px) {
    .bannerHisotry .content .left, .bannerHisotry .content .right {
        height: 180px;
    }
    .bannerHisotry .content .left p, .bannerHisotry .content .right p {
        font-size: 2rem;
        line-height: 40px;
    }
}

@media screen and (max-width: 767px) {
    .bannerHisotry .content .left, .bannerHisotry .content .right {
        height: 150px;
        margin: 0;
    }
    .bannerHisotry .content .left p, .bannerHisotry .content .right p {
        font-size: 1.5rem;
        line-height: 35px;
    }
    .bannerHisotry .content .right {
        margin-top: 10px;
    }
}

/*
------------------------ 百草年表 */
#nenpyou .message h2 {
    max-width: 411px;
    width: 100%;
    margin: 0 auto;
}

#nenpyou .message p {
    text-align: center;
    font-size: 1.2rem;
    font-family: "ヒラギノ明朝 pro", "游明朝", "Yu Mincho", "YuMincho", "yumincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "メイリオ", "Meiryo", serif;
    font-weight: bold;
    margin-top: 40px;
    line-height: 2;
}

@media screen and (max-width: 767px) {
    #nenpyou .message h2 {
        max-width: 80%;
    }
    #nenpyou .message p {
        font-size: 1rem;
        margin-top: 30px;
        line-height: 1.8;
    }
}

/*===== Vertical Timeline =====*/
#conference-timeline {
    width: 100%;
    margin: 0 auto;
}

#conference-timeline .conference-timeline-content {
    position: relative;
}

#conference-timeline .conference-center-line {
    position: absolute;
    width: 3px;
    height: 0;
    top: 0;
    left: 50%;
    /* margin-left: -1px; */
    background: #000040;
    z-index: -1;
    -webkit-transition: 4s all 0s ease;
    transition: 2s all 0s ease;
    margin: 30px 0;
}

#conference-timeline .conference-center-line.isActive {
    height: 100%;
}

#nenpyou .namisen {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 223px;
    bottom: 135px;
}

@media screen and (max-width: 894px) {
    #nenpyou .namisen {
        bottom: 165px;
    }
}

@media screen and (max-width: 767px) {
    #nenpyou .namisen {
        -webkit-transform: inherit;
        transform: inherit;
        left: 0px;
        bottom: 180px;
    }
}

.timeline-article {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.timeline-article.num02 {
    /* margin-top: -70px; */
    z-index: 2;
}

.timeline-article.num03 {
    margin-top: -280px;
}

.timeline-article.num04 {
    margin-top: 160px;
}

.timeline-article .content-left-container,
.timeline-article .content-right-container {
    max-width: 43%;
    width: 100%;
    padding: 10px;
    position: relative;
    -webkit-filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.3));
}

.timeline-article .content-left,
.timeline-article .content-right {
    position: relative;
    width: auto;
    background-color: #fff;
    padding: 25px;
    border-radius: 5px;
}

.timeline-article .content-left .image,
.timeline-article .content-right .image{
    width: 100%;
    max-width: 360px;
    height: 100%;
    max-width: 300px;
    margin: 15px auto 0;
}

.timeline-article .content-left img,
.timeline-article .content-right img{
    width: 100%;
}

.timeline-article p {
    padding: 0;
    font-size: 1rem;
    line-height: 2;
}

.conference-timeline-content h3{
    padding: 10px 0;
    z-index:10000;
    background-color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
    color: #b9b9b9;
}

.timeline-article p span.article-number {
    font-size: 1.05rem;
    font-weight: bold;
    line-height: 1;
    display: block;
    color: #5bc2d6;
    font-family: "ヒラギノ明朝 pro", "游明朝", "Yu Mincho", "YuMincho", "yumincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "メイリオ", "Meiryo", serif;
    margin-bottom: 10px;
}

.article-number:before{
    font-family: 'themify';
    content: "\e61b";
    font-size: 1.5em;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.timeline-article .content-left-container {
    float: left;
}

.timeline-article .content-right-container {
    float: right;
}

.timeline-article .content-left-container .arrow,
.timeline-article .content-right-container .arrow {
    position: absolute;
    display: block;
}

.timeline-article .content-left-container .arrow {
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 14px solid #fff;
    top: 70px;
    right: -2px;
}

.timeline-article .content-right-container .arrow {
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-right: 14px solid #fff;
    top: 60px;
    left: -2px;
}

.timeline-article .meta-date {
    position: absolute;
    top: 50px;
    left: 50%;
    width: 71px;
    height: 71px;
    margin-left: -35px;
    color: #fff;
    border-radius: 100%;
    background: #1f1f6e;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.timeline-article .meta-date .date {
    display: block;
    text-align: center;
    font-size: 1.1rem;
    line-height: 1;
    font-family: "ヒラギノ明朝 pro", "游明朝", "Yu Mincho", "YuMincho", "yumincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "メイリオ", "Meiryo", serif;
    position: relative;
    top: 2px;
}

.timeline-article .meta-date .date.tate {
    line-height: 0.85;
}

.timeline-article .meta-date .date.tate span {
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-lr;
}

/*===== // Vertical Timeline =====*/
@media screen and (max-width: 1024px) {
    .timeline-article.num03 {
        margin-top: -220px;
    }
    .timeline-article .content-left-container,
    .timeline-article .content-right-container {
        max-width: 40%;
    }
    .timeline-article .content-left,
    .timeline-article .content-right {
        padding: 15px;
    }
}

/*===== Resonsive Vertical Timeline =====*/
@media only screen and (max-width: 767px) {
    .timeline-article.num02, .timeline-article.num03 {
        margin-top: 0px;
    }
    .conference-timeline-content .center{
        text-align: left;
    }
    .timeline-article.num04 {
        margin-top: 100px;
    }
    .timeline-article p {
        line-height: 1.8;
    }
    #conference-timeline .timeline-start,
    #conference-timeline .timeline-end {
        margin: 0;
    }
    #conference-timeline .conference-center-line {
        margin-left: 0;
        left: 22px;
    }
    .timeline-article .meta-date {
        margin-left: 0;
        left: 0px;
        top: 20px;
        width: 50px;
        height: 50px;
    }
    .timeline-article .meta-date .date {
        font-size: 0.7rem;
    }
    .timeline-article .content-left-container,
    .timeline-article .content-right-container {
        max-width: 100%;
        width: auto;
        float: none;
        margin-left: 55px;
        min-height: 53px;
        padding: 10px 5px 10px 10px;
    }
    .timeline-article .content-left-container {
        margin-bottom: 20px;
    }
    .timeline-article .content-left,
    .timeline-article .content-right {
        padding: 10px;
        min-height: 65px;
    }
    .timeline-article p span.article-number {
        font-size: 0.9rem;
        font-weight: bold;
        color: #5bc2d6;
        margin-bottom: 6px;
    }
    .timeline-article .content-left-container .arrow {
        border: none;
        top: 30px;
        right: auto;
        left: 0px;
        border-top: 14px solid transparent;
        border-bottom: 14px solid transparent;
        border-right: 14px solid #fff;
    }
    .timeline-article .content-right-container .arrow {
        top: 30px;
        /* left: -14px; */
    }
}

@media only screen and (max-width: 400px) {
    .timeline-article p {
        margin: 0;
    }
}

/*===== // Resonsive Vertical Timeline =====*/
#conference-timeline .btnRound {
    text-align: center;
    margin-top: 60px;
}

.bannerHisotry .content .img-hyakuso {
    background-image: url(../img/history/toRekishi.png);
}

.bannerHisotry .content .img-cp {
    background-image: url(../img/history/toAyumi.png);
}

.bannerHisotry .content .img-index {
    background-image: url(../img/history/toNenpyou.png);
}

/*
------------------------ 長野県製薬のあゆみ */
#ayumi .message h2 {
    font-size: 1.5rem;
    font-weight: bold;
    color: #6a6a6a;
    /* font-family: "ヒラギノ角ゴシック", "ヒラギノ角ゴシック pro", sans-serif; */
}

#ayumi .message p {
    font-size: 1rem;
    /* line-height: 2; */
    margin-top: 10px;
}

.timeline {
    padding-left: 50px;
}

.timeline-list {
    margin: 0;
    position: relative;
}

.timeline-date {
    width: 110px;
    float: left;
    margin-top: 20px;
}

.timeline-content {
    padding-left: 40px;
    padding-bottom: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
}

.timeline-content h3 {
    color: #5bc2d6;
    font-size: 1.3rem;
    line-height: 1;
    font-weight: bold;
    /* font-family: "ヒラギノ角ゴシック", "ヒラギノ角ゴシック pro", sans-serif; */
    min-width: 200px;
    letter-spacing: 0rem;
}

.timeline-content h3 span {
    font-size: 0.8rem;
    font-family: "ヒラギノ角ゴシック", "ヒラギノ角ゴシック pro", sans-serif;
}

.detail:before{
    font-family: 'themify';
    content: "\e617";
    font-size: 1.5em;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    left: 19%;
    top: -2px;
    color: #5bc2d6;
}

.timeline-content p {
    font-size: 1rem;
    line-height: 2;
}

.timeline-content .detail_photos {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 20px;
}

.timeline-content .detail_photos .photo {
    max-width: 190px;
    width: 100%;
    margin-right: 10px;
    margin-top: 10px;
    -webkit-transition: 0.3s all 0s ease;
    transition: 0.3s all 0s ease;
}

.timeline-content .detail_photos .photo:hover {
    opacity: 0.7;
}

.timeline-list:nth-child(3) .timeline-content {
    padding-bottom: 100px;
}

.timeline-list:nth-child(3) .namisen {
    max-width: 223px;
    width: 100%;
    position: absolute;
    top: 200px;
    left: -50px;
}

.timeline-content::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background: #000040;
    position: absolute;
    left: -14px;
    border-radius: 100%;
}

.timeline-content::after {
    content: '';
    position: absolute;
    display: block;
    background-color: #000040;
    width: 3px;
    height: 0%;
    left: -5px;
    top: 0;
    -webkit-transition: all 1.5s ease 0s;
    transition: all 0.8s ease 0s;
}

.timeline-content.isActive::after {
    height: 100%;
}

.timeline-list:last-child .timeline-content::after {
    display: none;
}

@media screen and (max-width: 767px) {
    .timeline {
        list-style: none;
        padding-left: 10px;
    }
    .timeline-content {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding-left: 25px;
    }
    .timeline-content::before {
        width: 25px;
        height: 25px;
        left: -10px;
    }
    .timeline-list:nth-child(3) .namisen {
        max-width: 223px;
        width: 100%;
        position: absolute;
        top: 290px;
        left: -15px;
    }
    .timeline-content h3 {
        margin-left: 1.2rem;
        letter-spacing: 0.05rem;
    }
    .detail:before{
        left: 20px;
        top: -7px;
    }
    .timeline-content::after 
    left: 0px;
}


.modal {
    display: none;
    height: 100vh;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
}

.modal__bg {
    height: 100vh;
    position: absolute;
    width: 100%;
}

.modal__content {
    background: #fff;
    left: 60%;
    padding: 6px;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-width: 510px;
    width: 90%;
    border-radius: 4px;
    -webkit-filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 0.4));
}

.modal__content .wrapper {
    position: relative;
}

.modal__content .wrapper a {
    display: block;
    position: absolute;
    z-index: 10;
    top: -20px;
    right: -20px;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background-color: #fff;
}

.modal__content .wrapper a span {
    position: relative;
}

.modal__content .wrapper a span::before, .modal__content .wrapper a span::after {
    content: '';
    position: absolute;
    display: block;
    top: 13px;
    left: 5px;
    background-color: #9c9c9c;
    width: 21px;
    height: 3px;
}

.modal__content .wrapper a span::before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.modal__content .wrapper a span::after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.timetable .btnRound {
    text-align: center;
    margin-top: 70px;
}

@media screen and (max-width: 767px) {
    .modal__content {
        left: 50%;
    }
}

.fvQa {
    background-image: url(../img/qa/fvQa.png);
}

.gimon .inner {
    max-width: 930px;
}

.gimon .content {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
}

.gimon .content .left, .gimon .content .right {
    width: calc(50% - 30px * 1/2);
}

.gimon .content .left {
    margin-right: 30px;
}

.gimon .content .right .des {
    margin-top: 20px;
    line-height: 1.3;
    text-align: center;
    color: #737373;
}

.gimon .btnBlueBox {
    padding: 20px;
}

.gimon .btnBlueBox a {
    /*
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    */
    display:inherit;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: 0.3s all 0s ease;
    transition: 0.3s all 0s ease;
}

.gimon .btnBlueBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: 0.3s all 0s ease;
    transition: 0.3s all 0s ease;
}

.gimon .bBB2 {
    display: block;
}
.gimon .bBB2 img{
    width: 170px;
}

.gimon .flex .cnt{
    width: 50%;
    text-align: center;
}

.gimon .btnBlueBox a:hover {
    opacity: 0.7;
}

.gimon .btnBlueBox .texts {
    text-align: center;
    width: calc(100% - 138px);
    margin-right: 20px;
}
.gimon .btnBlueBox.bBB2 .texts {
    width: 100%;
}

.gimon .btnBlueBox .texts p {
    font-size: 0.95rem;
    line-height: 2;
}

.gimon .btnBlueBox .texts .title {
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1.8;
}

.gimon .btnBlueBox .image {
    max-width: 118px;
    width: 100%;
}

.gimon .btnRound {
    text-align: center;
    margin-top: 5px;
}

.gimon .btnRound a.paint {
    max-width: 185px;
    line-height: 40px;
    font-family: "ヒラギノ明朝 pro", "游明朝", "Yu Mincho", "YuMincho", "yumincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "メイリオ", "Meiryo", serif;
    font-size: 1.1rem;
    border-radius: 50px;
}

@media screen and (max-width: 1024px) {
    .gimon .btnBlueBox a .texts {
        width: calc(100% - 100px);
        margin-right: 10px;
    }
    .gimon .btnBlueBox a .image {
        max-width: 100px;
    }
}

@media screen and (max-width: 767px) {
    .gimon .btnBlueBox {
        padding: 10px;
    }
    .gimon .btnBlueBox a .texts p {
        line-height: 1.8;
    }
    .gimon .btnBlueBox a .texts .title {
        font-size: 1rem;
    }
    .gimon .content .right {
        margin-top: 20px;
    }
    .gimon .flex .cnt{
        width: 100%;
    }

}

.qa .inner {
    max-width: 1000px;
}

.qa h2 {
    text-align: center;
    font-size: 1.85rem;
    font-weight: bold;
    font-family: "ヒラギノ明朝 pro", "游明朝", "Yu Mincho", "YuMincho", "yumincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "メイリオ", "Meiryo", serif;
    color: #878787;
}

.sort_des {
    text-align: center;
    font-size: 1.05rem;
    margin-top: 30px;
}

.tab__wrapper {
    margin-top: 30px;
}

.tab-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.tab-container .tab {
    position: relative;
    padding: 10px;
    border: 1px solid #696969;
    margin: 7px;
    -webkit-transition: 0.3s all 0s ease;
    transition: 0.3s all 0s ease;
    cursor: pointer;
}

.tab-container .tab:hover {
    color: #eaeaea;
    background-color: #696969;
}

@media screen and (max-width: 767px) {
    .tab__wrapper {
        margin-top: 10px;
    }
    .tab-container {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    .tab-container .tab {
        margin-top: 10px;
        font-size: 0.9rem;
    }
}

/* タブ現在値 */
.current {
    color: #eaeaea;
    background-color: #696969;
}

/************* メニュー *************/
.menu-box {
    width: 100%;
}

.menu {
    padding: 2em 1em;
    background-color: #eee;
    -webkit-transition: all .2s;
    transition: all .2s;
    cursor: pointer;
}

.qa-lists {
    margin-top: 45px;
}

.list {
    margin-top: 15px;
    background-color: #f0f0f0;
    padding: 15px;
    position: relative;
    border-radius: 15px;
}

.question {
    z-index: 1;
    position: relative;
}

.question::before, .question::after {
    content: '';
    display: block;
    position: absolute;
    width: 23px;
    height: 2px;
    background-color: #000;
    right: 0px;
    top: 17px;
    -webkit-transition: 0.3s all 0s ease;
    transition: 0.3s all 0s ease;
}

.question::after {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.question p {
    position: relative;
    padding-left: 55px;
    padding-right: 30px;
    font-size: 1.4rem;
    font-weight: bold;
    color: #000040;
    font-family: 'ヒラギノ角ゴ pro';
}

.question p::before {
    content: '';
    position: absolute;
    display: block;
    top: -5px;
    left: 10px;
    content: 'Q.';
    font-size: 1.8rem;
    color: #000040;
    font-family: "ヒラギノ明朝 pro", "游明朝", "Yu Mincho", "YuMincho", "yumincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "メイリオ", "Meiryo", serif;
    font-weight: 400;
}
.question.open::before {
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
}

.question.open::after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.answer {
    position: relative;
    display: none;
    z-index: 0;
    background-color: #fff;
    padding: 30px 20px 30px 71px;
    margin-top: 20px;
}

.answer::before {
    content: '';
    position: absolute;
    display: block;
    top: 25px;
    left: 30px;
    content: 'A.';
    color: #878787;
    font-size: 1.7rem;
    font-family: "ヒラギノ明朝 pro", "游明朝", "Yu Mincho", "YuMincho", "yumincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "メイリオ", "Meiryo", serif;
}

.answer ul li p {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.answer ul li p .num {
    display: block;
}

.answer p {
    line-height: 2;
}

.answer p .red {
    color: #900000;
}

.open {
    display: block;
}

.last_message {
    margin-top: 15px;
}

.qa .last_message .dot_box {
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-lr;
    font-weight: bold;
    margin: 0 auto;
    letter-spacing: 15px;
}

.last_message .txt {
    text-align: center;
    font-size: 1.05rem;
    line-height: 2;
}

@media screen and (max-width: 767px) {
    .list {
        padding: 10px;
    }
    .question::before, .question::after {
        width: 15px;
        top: 10px;
    }
    .question p {
        font-size: 1rem;
        padding-left: 45px;
        padding-right: 20px;
    }
    .question p::before {
        font-size: 1.5rem;
        top: -7px;
    }
    .answer {
        padding: 15px;
        padding-left: 50px;
    }
    .answer p {
        line-height: 1.8;
    }
    .answer::before {
        top: 10px;
        left: 15px;
        font-size: 1.5rem;
    }
}

.fvCrude {
    background-image: url(../img/crude/fvCrude.png);
}

.about-bg {
    position: relative;
    z-index: 0;
    width: 100%;
    margin: 0 auto;
}

.about__wrapper {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    margin-top: -410px;
    max-width: 890px;
    color: #363636;
}

.about__wrapper h2 {
    font-size: 1.9rem;
    font-family: 'ヒラギノ明朝 proN';
    font-weight: bold;
    text-align: center;
}

.about__wrapper h2 rt {
    font-size: 0.5rem;
}

.about__wrapper .content {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    margin-top: 20px;
}

.about__wrapper .left {
    width: 50%;
}

.about__wrapper p.info {
    font-size: 0.9rem;
    line-height: 1.8;
    color: #742323;
}

.about__wrapper .right {
    width: 45%;
}

.about__wrapper .left p {
    font-size: 1.05rem;
    line-height: 2;
}

@media screen and (max-width: 1024px) {
    .about__wrapper {
        margin-top: -320px;
    }
    .about__wrapper h2 {
        font-size: 1.5rem;
    }
    .about__wrapper .content {
        max-width: 85%;
        margin: 20px auto 0;
    }
    .about__wrapper .left p {
        font-size: 1rem;
        line-height: 1.8;
    }
}

@media screen and (max-width: 850px) {
    .about__wrapper {
        margin-top: -280px;
    }
}

@media screen and (max-width: 767px) {
    .about__wrapper {
        margin-top: 0;
    }
    .about__wrapper .content {
        max-width: 100%;
    }
    .about__wrapper .right {
        margin-top: 20px;
    }
}

.feature {
    padding-top: 0;
    margin-top: -20px;
    position: relative;
    z-index: 2;
}

.feature .inner {
    max-width: 890px;
}

.feature .wrapper {
    background-color: #900000;
    color: #fff;
    text-align: center;
    padding: 40px 55px;
}

.feature .wrapper h2 {
    font-size: 1.9rem;
    font-family: 'ヒラギノ明朝 proN';
    font-weight: bold;
}

.feature .wrapper h2 span {
    display: block;
    font-size: 1.05rem;
    line-height: 2;
}

.feature .wrapper .text {
    font-size: 1.05rem;
    line-height: 2;
    margin-top: 20px;
}

.feature .wrapper .text span {
    text-decoration: underline;
}

.feature_lists {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 680px;
    margin: 15px auto 0;
}

.feature_lists .image {
    width: 133px;
    margin: 0 auto;
}

.feature_lists p {
    font-size: 0.95rem;
    line-height: 1.4;
    margin-top: 15px;
}

.feature .des {
    font-size: 0.8rem;
    margin-top: 5px;
}

@media screen and (max-width: 767px) {
    .feature {
        padding: 30px 0;
        margin-top: 0;
    }
    .feature .wrapper {
        padding: 30px 10px;
    }
    .feature .wrapper h2 {
        font-size: 1.5rem;
    }
    .feature .wrapper .text {
        font-size: 1rem;
        line-height: 1.8;
    }
}

.crudeDrug h2 {
    font-size: 1.9rem;
    font-weight: bold;
    text-align: center;
    color: #878787;
}

.CD-lists {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 20px 0 40px;
}

.CD-lists li {
    width: calc(50% - 20px * 1/2);
    padding: 20px 20px;
    color: #363636;
    font-family: 'ヒラギノ角ゴ pro';
    border-radius: 20px;
    margin-top: 0;
    -webkit-box-shadow: 5px 5px 10px #ccc;
    box-shadow: 5px 5px 10px #ccc;
    cursor: inherit;
    -webkit-transition: 0.3s all 0s ease;
    transition: 0.3s all 0s ease;
}

.CD-lists li:nth-child(2n-1) {
    margin-right: 20px;
}

.CD-lists li:nth-child(n+3) {
    margin-top: 20px;
}

.CD-lists li:hover {
    -webkit-transform: rotateY(15deg);
    transform: rotateY(15deg);
}



.CD-lists .content {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.CD-lists .content .left {
    width: 38.6%;
    margin-right: 15px;
}

.CD-lists .content .right {
    width: calc(61.4% - 15px);
}

.CD-lists .content .right h3,
.CD-lists2 .content .right h3{
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 2;
    font-family: 'ヒラギノ角ゴ pro';
}

.CD-lists .content .right p {
    font-size: 1.05rem;
    line-height: 2;
}

.CD-lists .Link {
    max-width: 132px;
    border-bottom: 1px dashed #900000;
}

.CD-lists .Link a {
    color: #900000;
}

.CD-lists .Link a span {
    width: 6px;
}

.crudeDrug .btnRound {
    text-align: center;
    margin-top: 90px;
}

.crudeDrug h4{
    color: #fff;/*文字色*/
    padding: 0.5em 1em 0.5em 0.5em;/*文字周りの余白*/
    display: inline-block;/*おまじない*/
    line-height: 1.3;/*行高*/
    background: #900000;/*背景色*/
    vertical-align: middle;
    border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/
}

.crudeDrug h4:before {
    content: '●';
    color: white;
    margin-right: 8px;
}



@media screen and (max-width: 1024px) {
    .CD-lists .content {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .CD-lists .content .left, .CD-lists .content .right {
        width: 100%;
    }
    .CD-lists .content .right h3 {
        font-size: 1.2rem;
    }
    .CD-lists .content .right p {
        font-size: 1rem;
        line-height: 1.8;
    }
}

@media screen and (max-width: 767px) {
    .crudeDrug h2 {
        font-size: 1.4rem;
    }
    .CD-lists li {
        width: 100%;
    }
    .CD-lists li:nth-child(2n-1) {
        margin-right: 0;
    }
    .CD-lists li:nth-child(2) {
        margin-top: 30px;
    }
}


#product{
    margin-top: 30px;
}

.CD-lists2 li {
    width: calc(50% - 20px * 1/2);
    padding: 20px 20px;
    font-family: 'ヒラギノ角ゴ pro';
    border-radius: 20px;
    margin-top: 0;
    cursor: inherit;
    -webkit-transition: 0.3s all 0s ease;
    transition: 0.3s all 0s ease;
}
.CD-lists2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 20px 0 40px;
}

.CD-lists2 li:nth-child(2n-1) {
    margin-right: 20px;
}

.CD-lists2 li:nth-child(n+3) {
    margin-top: 20px;
}

.CD-lists2 li:hover {
    -webkit-transform: rotateY(15deg);
    transform: rotateY(15deg);
}

.CD-lists2 .list {
    margin-top: 15px;
    background-color: #fff;
    padding: 15px;
    position: relative;
    border-radius: 0px;
    border: solid #ddd 1px
}

.CD-lists2 li:hover {
    -webkit-transform: none;
    transform: none;
}

.CD-lists2 .content .left {
    width: 40%;
    margin-right: 15px;
}

.CD-lists2 .content .right {
    width: calc(60% - 15px);
    text-align: center;
}

ul.in-product li {
    width: 100%;
    margin-top: 8px !important;
    line-height: 1.3;
    padding: 0.5em 0;
    width: 100%;
}

ul.in-product li a{
    border-bottom: dotted 2px #87CEFA;
    padding: 0 0.2rem 0.3rem;
}

ul.in-product li a:before{
    font-family: 'themify';
    content: "\e65d";
    font-size: 1em;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 10px;
    line-height: 0.5;
    position: relative;
    top: 3px;
    color:#87CEFA;
}
ul.in-product li a:hover{
    color:#87CEFA;
}

@media screen and (max-width: 1024px) {
    .CD-lists2 .content {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .CD-lists2 .content .left, .CD-lists .content .right {
        width: 100%;
    }
    .CD-lists2 .content .right h3 {
        font-size: 1.2rem;
    }
    .CD-lists2 .content .right p {
        font-size: 1rem;
        line-height: 1.8;
    }
}
@media screen and (max-width: 767px) {
    .CD-lists2 li {
        width: 100%;
    }
    .CD-lists2 li:nth-child(2n-1) {
        margin-right: 0;
    }
    .CD-lists2 li:nth-child(2) {
        margin-top: 30px;
    }
}



/* 
------------------------- 生薬手帳個別ページ */
.CD_single .inner {
    max-width: 1190px;
}

.CD_single .container {
    border-radius: 20px;
    -webkit-box-shadow: 0 0 20px #787878;
    box-shadow: 0 0 20px #787878;
    padding: 50px 30px 80px;
}

.CD_single .content.top {
    padding-left: 50px;
    padding-right: 10px;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.CD_single .content.top .left {
    width: 40.5%;
}

.CD_single .content.top .right {
    width: 54.8%;
    position: relative;
}

.CD_single .content.top .right .title {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    max-width: 340px;
    width: 100%;
}

.CD_single .content.top .right .title h2 {
    font-size: 1.9rem;
    font-weight: bold;
    font-family: "ヒラギノ角ゴシック", "ヒラギノ角ゴシック pro", sans-serif;
}
.CD_single .content.top .right .title span {
    font-size: 1rem;
}

.CD_single .content.top .right .title p {
    color: #900000;
    font-size: 1rem;
    line-height: 1.5;
}

.CD_single .content.bottom {
    margin-top: 60px;
    padding: 0 40px;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
}

.CD_single .content.bottom .left {
    width: calc(100% - 433px);
    margin-right: 40px;
}

.CD_single .content.x {flex-direction: row-reverse;}

.CD_single .content.bottom .left h3 {
    font-size: 1.3rem;
    font-weight: 600;
    font-family: "ヒラギノ角ゴシック", "ヒラギノ角ゴシック pro", sans-serif;
    color: #585858;
}

.CD_single .content.bottom .left p {
    font-size: 1.05rem;
    line-height: 2;
    margin-top: 20px;
    background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%), /* 点線1の色 */
        linear-gradient(180deg, #ccc 1px, transparent 1px); /* 点線2の色と太さ */
    background-size: 8px 100%, /* 点線1のサイズ */
        100% 2.5rem; /* 点線2のサイズ */
    line-height: 2.5rem; /* 文字の高さ */
    padding-bottom: 1px; /* 最終行の下にも罫線を引く */
}
.CD_single .content.bottom .left p.shuten {
    font-size: 1rem;
    line-height: 1.8;
    background-image: none;
    color: #646464;
    margin-top: 0;
}

.CD_single .content.bottom p span.title{
    font-weight: 600;
    font-size: 1.2rem;
    color: #900000;
}

.CD_single .content.bottom .right {
    width: 393px;
}

@media screen and (max-width: 950px) {
    .CD_single .content.bottom {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .CD_single .content.bottom .left, .CD_single .content.bottom .right {
        width: 100%;
    }
    .CD_single .content.bottom .right {
        max-width: 80%;
        margin: 20px auto 0;
    }
}

@media screen and (max-width: 767px) {
    .CD_single .container {
        padding: 40px 15px;
    }
    .CD_single .content.top {
        padding: 0;
    }
    .CD_single .content.top .right .title h2 {
        font-size: 1.2rem;
    }
    .CD_single .content.top .right .title p {
        font-size: 0.8rem;
    }
    .CD_single .content.top .image {
        margin-right: -10px;
        margin-left: -10px;
    }
    .CD_single .content.bottom {
        padding: 0;
    }
    .CD_single .content.bottom .left {
        margin-right: 0;
    }
    .CD_single .content.bottom .left h3 {
        font-size: 1.2rem;
    }
    .CD_single .content.bottom .left p {
        font-size: 1rem;
        line-height: 2;
        background-size: 8px 100%, /* 点線1のサイズ */
            100% 2rem; /* 点線2のサイズ */
    }
    .CD_single .content.bottom .right {
        max-width: 100%;
    }
}

.gallery {
    padding: 0 20px;
    margin-top: 60px;
}

.gallery h3 {
    font-size: 1.85rem;
    font-weight: bold;
    color: #878787;
    text-align: center;
}

.gallery-text p{
    text-align: center;
    margin-top: 30px;
}

.gallery .card_04 {
    margin-top: 40px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.gallery .card_04 li {
    width: calc(25% - 20px * 3/4);
    margin-right: 20px;
}

.gallery .card_04 li:nth-child(n+5) {
    margin-top: 20px;
}

.gallery .card_04 p {
    font-size: 0.95rem;
    line-height: 1.4;
    margin-top: 8px;
    color: #737373;
}

@media screen and (max-width: 950px) {
    .gallery .card_04 li {
        width: calc(50% - 20px * 1/2);
    }
    .gallery .card_04 li:nth-child(2n) {
        margin-right: 0;
    }
    .gallery .card_04 li:nth-child(n+3) {
        margin-top: 20px;
    }
}

@media screen and (max-width: 767px) {
    .gallery {
        padding: 0;
    }
    .gallery h3 {
        font-size: 1.5rem;
    }
    .gallery .card_04 li {
        width: 100%;
        margin-right: 0;
    }
}

.kobore {
    padding: 0 10px;
    margin-top: 100px;
}

.kobore .content {
    background-color: #f0f0f0;
    padding: 50px 70px;
}

.kobore .left {
    max-width: 310px;
    width: 100%;
    margin-right: 20px;
}

.kobore .right {
    width: calc(100% - 330px);
}

.kobore .right h3 {
    font-size: 1.4rem;
    line-height: 2;
    font-family: "ヒラギノ角ゴシック", "ヒラギノ角ゴシック pro", sans-serif;
    font-weight: bold;
}

.kobore .right p {
    font-size: 1.05rem;
    line-height: 2;
    margin-top: 10px;
}

.CD_single .btnRound {
    text-align: center;
    margin-top: 80px;
}

.CD_single .btnRound a {
    background-color: #900000;
    border: 1px solid #900000;
}

.CD_single .btnRound a:hover {
    color: #900000;
    background-color: #fff;
}

#CD-single p.shoyaku.des{
    margin: 30px 0 40px;
    color: #ababab;
    line-height: 1.8;
}

@media screen and (max-width: 1024px) {
    .kobore .content {
        padding: 20px;
    }
    .kobore .right h3 {
        font-size: 1.3rem;
    }
}

@media screen and (max-width: 767px) {
    .kobore {
        padding: 0;
    }
    .kobore .content {
        padding: 15px;
    }
    .kobore .left {
        margin-right: 0;
    }
    .kobore .right h3 {
        font-size: 1.2em;
    }
    .kobore .right p {
        font-size: 1rem;
        line-height: 1.8;
    }
    .CD_single .btnRound {
        margin-top: 50px;
    }
}

.using h2 {
    font-size: 1.85rem;
    font-weight: bold;
    color: #878787;
    text-align: center;
}

.using .btnRound {
    text-align: center;
    margin-top: 75px;
}

@media screen and (max-width: 767px) {
    .using h2 {
        font-size: 1.5rem;
    }
    .using .btnRound {
        margin-top: 50px;
    }
}

.fvProduct {
    background-image: url(../img/product/fvProduct.png);
}

@media screen and (max-width: 767px) {
    .fvProduct {
        background-position: center right;
    }
}

#product h2 {
    font-size: 1.85rem;
    font-family: "ヒラギノ明朝 pro", "游明朝", "Yu Mincho", "YuMincho", "yumincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "メイリオ", "Meiryo", serif;
    font-weight: bold;
    color: #878787;
}

@media screen and (max-width: 1024px) {
    #product h2 {
        font-size: 1.5rem;
    }
}

#product .message .content {
    padding: 0 10px;
}

#product .message .left {
    width: calc(100% - 433px);
    margin-right: 70px;
}

#product .message .left p {
    font-size: 1.05rem;
    line-height: 2;
    color: #363636;
    margin-top: 10px;
}

#product .message .right {
    width: 363px;
}

#product .message .link-btn,
#crude .link-btn{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 60px;
    flex-wrap: wrap;
}

#product .message .link-btn .btnSquare.mr,
#crude .link-btn .btnSquare.mr{
    margin-right: 15px;
}

@media screen and (max-width: 600px) {
    #product .message .link-btn .btnSquare,
    #crude .link-btn .btnSquare{
        /* margin: 20px auto; */
        /* text-align: center; */
        margin: 2%;
        width: 46%;
    }
    #product .message .link-btn .btnSquare.mr,
    #crude .link-btn .btnSquare.mr{
        margin: 2%;
    }
}

#product .message .link-btn .btnSquare a,
#crude .link-btn .btnSquare a{
    font-size: 0.9rem;
    line-height: 41px;
    padding: 0 25px;
}

#crude .link-btn .btnSquare a{
    background-color: #900000;
}
#crude .link-btn .btnSquare a:hover {
    background-color: #fff;
    color: #900000;
}

@media screen and (max-width: 1024px) {
    #product .message .content {
        padding: 0;
    }
    #product .message .left {
        width: calc(100% - 383px);
        margin-right: 20px;
    }
    #product .message .link-btn,
    #crude .link-btn{
        margin-top: 30px;
    }
}

@media screen and (max-width: 767px) {
    #product .message .left {
        margin-right: 0;
    }
    #product .message .left p {
        font-size: 1rem;
        line-height: 1.8;
    }
    #product .message .right {
        margin-top: 15px;
    }
    #product .message .link-btn,
    #crude .link-btn{
        /* display: block; */
    }
}

#self-product.card_03 {
    margin-top: 10px;
    padding: 0 30px;
}

.self-manu h2 {
    font-size: 1.85rem;
    font-weight: bold;
    color: #878787;
    text-align: center;
    margin: 30px 0;
}

#self-product.card_03 li {
    margin-top: 60px;
    -webkit-transition: 0.3s all 0s ease;
    transition: 0.3s all 0s ease;
    border: solid 1px #cfcfcf;
}

#self-product.card_03 li:nth-child(1), #self-product.card_03 li:nth-child(2), #self-product.card_03 li:nth-child(3) {
    margin-top: 0;
}

#self-product.card_03 li:hover {
    opacity: 0.7;
}

#self-product.card_03 .des {
    font-size: 0.9rem;
    line-height: 1.9;
}

@media screen and (max-width: 767px) {
    #self-product.card_03 {
        padding: 0;
    }
    #self-product.card_03 li {
        margin-top: 40px;
        border: solid 1px #cfcfcf;
        padding: 10px 20px 30px;
        margin: 0 10px;
    }
    #self-product.card_03 li:nth-child(2), #self-product.card_03 li:nth-child(3) {
        margin-top: 40px;
    }
}

.peace {
    /* max-width: 640px; */
    margin: 0 auto;
    text-align: center;
}

.peace h2 {
    text-align: center;
}

.peace p,.peace ul {
    font-size: 1.05rem;
    line-height: 2;
    margin-top: 20px;
}

.peace ul li {
    margin-top: 15px;
}

.peace .btnSquare {
    text-align: center;
    margin-top: 40px;
}

.peace .btnSquare a {
    max-width: 312px;
    font-family: "ヒラギノ明朝 pro", "游明朝", "Yu Mincho", "YuMincho", "yumincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "メイリオ", "Meiryo", serif;
}

.to-page {
    background-color: #f0f0f0;
    margin-top: 30px;
}

.to-page .inner {
    max-width: 640px;
}

.to-page .left {
    width: calc(50% - 50px * 1/2);
    margin-right: 50px;
}

.to-page .right {
    width: calc(50% - 50px * 1/2);
}
.to-page .center {
    width: calc(50% - 50px * 1/2);
    margin: 0 auto;
}
.to-page .center p{
    font-size: 0.9rem;
}

.to-page .catchcopy {
    text-align: center;
    font-size: 1.05rem;
    line-height: 2;
}

.to-page .btnBlueBox {
    border-radius: 15px;
    background-color: #fff;
}

.to-page .btnBlueBox a {
    padding: 30px 0;
    display: block;
    -webkit-transition: 0.3s all 0s ease;
    transition: 0.3s all 0s ease;
}

.to-page .btnBlueBox a:hover {
    opacity: 0.7;
}

.to-page .btnBlueBox p {
    font-size: 1rem;
    line-height: 1;
    margin-top: 10px;
    color: #000040;
    text-align: center;
}

.to-page .left .icon {
    width: 142px;
    margin: 0 auto;
}

.to-page .right .icon {
    width: 133px;
    margin: 0 auto;
}
.to-page .center .icon {
    width: 142px;
    margin: 0 auto;
}

@media screen and (max-width: 767px) {
    .to-page .left {
        margin-right: 0;
    }
    .to-page .right {
        margin-top: 30px;
    }
    .to-page .btnBlueBox a {
        padding: 15px 0;
    }
    .to-page .left .icon {
        width: 100px;
    }
    .to-page .right .icon {
        width: 100px;
    }
    .to-page .center .icon {
        width: 100px;
    }

}

/* 
------------------------- 製品情報個別ページ */
.product_single .inner {
    max-width: 1200px;
}

.product_single .container {
    border-radius: 20px;
    -webkit-box-shadow: 0 0 10px #d7d7d7;
    box-shadow: 0 0 10px #d7d7d7;
    padding: 50px 80px 80px;
}

.product_single .container .contents {
    margin-top: 50px;
}

.product_single .container h2 {
    font-size: 1.9rem;
    line-height: 1.6;
    font-weight: bold;
    color: #000;
    font-family: "ヒラギノ角ゴシック", "ヒラギノ角ゴシック pro", sans-serif;
    display: inline-block;
    margin-right: 10px;
}

.product_single .container .type {
    font-size: 0.85rem;
    padding: 3px 5px;
    border: 1px solid #000;
}

.product_single .container p {
    font-size: 1.05rem;
    line-height: 2;
    color: #363636;
}

.product_single .container h3 {
    font-size: 1.4rem;
    font-weight: bold;
    color: #363636;
    font-family: "ヒラギノ角ゴシック", "ヒラギノ角ゴシック pro", sans-serif;
    margin-bottom: 15px;
}

.product_single .container .des {
    line-height: 1.5;
    color: #737373;
    margin-top: 5px;
}

.product_single .container .red {
    color: #d30000;
    font-weight: bold;
}

.product_single .container .btnRound a {
    border-radius: 50px;
    line-height: 47px;
}

@media screen and (max-width: 1024px) {
    .product_single .container {
        padding: 50px 30px 80px;
    }
    .product_single .container .des {
        font-size: 0.9rem;
    }
}

@media screen and (max-width: 767px) {
    .product_single .container {
        padding: 30px 20px 30px;
    }
    .product_single .container h2 {
        font-size: 1.5rem;
    }
    .product_single .container p {
        font-size: 1rem;
        line-height: 1.8;
    }
    .product_single .container h3 {
        font-size: 1.2rem;
        margin-bottom: 10px;
    }
}

/*
---------------- 多言語化 */
.language{
    text-align: center;
    /* margin-top: 0.5rem; */
}
.language a.lang_btn{
    display: inline-block;
    padding: 0.3em 1em;
    text-decoration: none;
    color: #67c5ff;
    border: solid 1px #67c5ff;
    border-radius: 3px;
    transition: .4s;
}

.language a.lang_btn:hover {
    background: #67c5ff;
    color: white;
}

/*
---------------- container内 */
.product_single .headline {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.product_single .headline .image {
    width: 50%;
    padding: 0 50px;
}

.product_single .headline .overview {
    width: 50%;
}

.product_single .headline .lineup p {
    line-height: 2;
    margin-top: 30px;
}

.product_single .headline .catchcopy {
    padding: 20px;
    border: 1px solid #000;
    margin-top: 25px;
}

.product_single .headline .catchcopy p {
    font-size: 1.15rem;
    line-height: 1.8;
    font-weight: bold;
}

.product_single .headline .blue_link {
    color: #0000d9;
    border-bottom: solid 1px;
    padding: 0 2px;
    margin: 0 2px;
}

.product_single .headline .blue_link:hover {
    opacity: 0.7;
}

.product_single .headline .btns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 10px;
}

.product_single .headline .btns .btnRound {
    width: calc(50% - 10px * 1/2);
    margin-top: 25px;
}

.product_single .headline .btns .btnRound.toPdf {
    margin-right: 10px;
}

@media screen and (max-width: 1024px) {
    .product_single .headline .image {
        padding: 0 10px;
    }
    .product_single .headline .lineup p {
        line-height: 1.8;
        margin-top: 20px;
    }
    .product_single .headline .catchcopy {
        padding: 10px;
    }
    .product_single .headline .catchcopy p {
        font-size: 1rem;
        line-height: 1.8;
    }
}

@media screen and (max-width: 767px) {
    .product_single .headline {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .product_single .headline .image {
        width: 100%;
        padding: 0;
    }
    .product_single .headline .overview {
        width: 100%;
    }
    .product_single .headline .catchcopy {
        padding: 10px;
        margin-top: 20px;
    }
    .product_single .headline .btns {
        padding: 0;
    }
}

.contents.sample {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
}

.contents.sample .left {
    width: calc(60% - 10px);
    margin-right: 10px;
}

.contents.sample .right {
    width: 40%;
}

.contents.grayBox {
    background-color: #f0f0f0;
    padding: 50px 60px 30px;
    margin-right: -30px;
    margin-left: -30px;
}

.contents.grayBox .left {
    width: 310px;
    margin-right: 20px;
}

.contents.grayBox .right {
    width: calc(100% - 330px);
}

@media screen and (max-width: 1024px) {
    .contents.contents.grayBox {
        padding: 20px;
        margin-right: 0;
        margin-left: 0;
    }
}

@media screen and (max-width: 767px) {
    .contents.grayBox .left {
        margin-right: 0;
    }
    .contents.grayBox .right {
        margin-top: 20px;
    }
}

.blueBox {
    background-color: #edf4ff;
    padding: 15px 20px;
}

.tableContent .content {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
}

.tableContent .left {
    width: calc(50% - 20px);
    margin-right: 20px;
}

.tableContent .left_en {
    width: 75%;
    margin-right: 20px;
}

.tableContent .right {
    width: 50%;
}

.tableContent .btnRound {
    margin-top: 25px;
    text-align: center;
}

.tableContent .btnRound a {
    max-width: 340px;
}

.tableContent table {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #000;
}

.tableContent table th, .tableContent table td {
    padding: 8px 10px;
    font-size: 1.05rem;
    line-height: 1.2;
    text-align: center;
    vertical-align: middle;
}

.tableContent table th:first-child,
.tableContent table td:first-child {
    border-right: 1px solid #000;
    width: 64.5%;
}

.tableContent .cn table th:first-child,
.tableContent .cn table td:first-child {
    border-right: 1px solid #000;
    width: 48%;
}

.tableContent .cn table td,th {
    border-right: 1px solid #000;

}

.tableContent table .br {
    border-right: 1px solid #000;
}

.tableContent table td:first-child {
    padding-left: 50px;
    text-align: left;
}

.tableContent table th {
    width: 30%;
    background-color: #bbd6ff;
}

.tableContent table tr:nth-child(2n-1) {
    background-color: #faffff;
}

.tableContent table tr:nth-child(2n) {
    background-color: #edf4ff;
}

.tableContent table .border-none {
    border-bottom: none;
}

.tableContent table a {
    color: #000040;
    -webkit-transition: 0.3s all 0s ease;
    transition: 0.3s all 0s ease;
}

.tableContent table a:hover {
    opacity: 0.7;
}

@media screen and (max-width: 1024px) {
    .tableContent table th, .tableContent table td {
        font-size: 1rem;
    }
    .tableContent table td:first-child {
        padding-left: 10px;
    }
}

@media screen and (max-width: 767px) {
    .tableContent table th, .tableContent table td {
        padding: 7px 2px;
    }
}

.contents li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.contents.last h3 {
    border-bottom: 3px solid #000;
    display: inline;
    line-height: 1.7;
}

@media screen and (max-width: 767px) {
    .contents.last h3 {
        padding-bottom: 7px;
    }
}

#contact .btnRound {
    /* margin-top: 90px; */
    text-align: center;
}

@media screen and (max-width: 767px) {
    #contact .btnRound {
        margin-top: 50px;
    }
}

.table {
    border-collapse: collapse;
    width: 50%;
}

.table th, .table td {
    text-align: left;
    border: 1px solid #000;
    padding: 5px;
}

.table th:first-child {
    width: 100px;
}

.table td:first-child {
    width: calc(100% - 100px);
}

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


#hyakuso{
    width: 100%;
    max-width:1000px;
    margin: 0 auto;
}

.headline{
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.headline .image {
    width: 50%;
    padding: 0 50px;
}

.headline .overview {
    width: 50%;
}

.headline p {
    line-height: 2;
    margin-top: 20px;
}

.headline .title h2 {
    font-size: 1.9rem;
    line-height: 1.6;
    font-weight: bold;
    color: #000;
    font-family: "ヒラギノ角ゴシック", "ヒラギノ角ゴシック pro", sans-serif;
    display: inline-block;
    margin-right: 10px;
}
@media screen and (max-width: 600px) {
    .headline .title h2 {
        display: block;
        margin: 0 auto 0.5rem;
        text-align: center;
    }
}

.headline .title .type {
    font-size: 0.85rem;
    padding: 3px 5px;
    border: 1px solid #000;
}
@media screen and (max-width: 600px) {
    .headline .title h2 {
        display: block;
        margin: 0 auto 1rem;
        text-align: center;
    }
    .headline .title .type {
        text-align: center;
        margin: 0 auto 0.5rem;
        display: block;
        max-width: 10rem;
    }
}
#hyakuso .top-imgs img{
    margin-bottom: 30px;
}
.post-content {
    width: 100%;
    padding: 0 1px;
}
.post {
    width: 100%;
    padding: 50px 0px 0 0px;
}

.post h2 {
    font-size: 22px;
    text-align: center;
    padding-bottom: 10px;
    margin-bottom: 25px;
}

.post h2 span {
    font-size: 33px;
    color: green;
    margin: 0 10px;
}

.post p{line-height: 2;margin: 20px auto;/* width: 80%; *//* min-width: 400px; */}

.post h3{
    margin: 30px 0;
    text-align: center;
    font-size: 1.3rem;
    color: #0000a7;
}

.problem-imgs {
    display: flex;
    justify-content: space-between;
    margin: 0 auto 30px;
    width: 90%;
}

.problem-imgs li {
    width: 22%;
}

.problem-imgs.cl3 li {
    width: 33.33%;
}

.problem-imgs li img {
    width: 100%;
}

.problem-imgs li p {
    text-align: center;
    padding-top: 10px;
    font-size: 0.9rem;
    color: #015696;
}
.effect{
    width: 100%;
    /* min-width: 400px; */
    margin: 0 auto 30px;
}
.effect-text-title {
    width: 20%;
    min-width: 200px;
    height: 40px;
    border-radius: 10px 10px 0 0;
    background-color: #000040;
    font-size: 1.3rem;
    text-align: center;
    padding-top: 7px;
    color: #fff;
}

.effect-text {
    width: 100%;
    border: solid 4px #000040;
    text-align: center;
    line-height: 2rem;
    padding: 0 15px;
    margin-bottom: 15px;
}

#hyakuso .btnRound{
    margin: 30px auto;
    text-align: center;
    width: 80%;
}


.middle-imgs {
    margin-top: 15px;
}

.middle-imgs img {
    width: calc(100% / 3);
}

.post3-content h4 {
    margin-bottom: 25px;
}

.post3-content p {
}

.herbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.herbs li {
    width: 47%;
    margin-top: 20px;
}

.herbs img {
    width: 100%;
    margin-bottom: 15px;
}

.post3-content .herbs-name {
    font-size: 18px;
}

.herb-box {
    display: inline-block;
    width: 5px;
    height: 5px;
}

img.last-img {
    width: 100%;
}

.flex{
    display: flex;
    /*         max-width: 1000px; */
    margin: auto;
    flex-wrap: wrap;
}

.flex.x {
    flex-direction: row-reverse;
}

.cnt{
    padding: 10px;
    margin: auto;
}

.flex .cnt{
    width: 100%;
    /* max-width: 400px; */
}
.flex.clm3 .cnt{
    padding: 10px;
    width: 33%;
}
.flex.clm2 .cnt{
    padding: 10px;
    width: 45%;
}
.cnt.w50{
    width: 50%;
}

.cnt.w70{
    width: 70%;
    border: 1px solid #b5b5b5;
    height: 200px;
    margin: 0 anto; 
}

#hyakuso .post .cnt{
    width: 50%;

}

@media screen and (max-width: 600px) {
    .flex{
        display: block;
    }
    .item-list-description .flex{
        display: block;
    }

    .cnt.w50{
        width: 100%;
    }
    .cnt.w70{
        width: 90%;
    }
    .flex.clm3 .cnt{
        width: 100%;
    }
    .flex.clm2 .cnt{
        width: 90%;
    }
    .sp-flex{
        display: flex;
    }
    .problem-imgs li p {
        text-align: center;
        padding-top: 10px;
    }
    .post {
        padding: 50px 10px 0 10px;
    }

    .post-content {
        padding: 0 15px;
    }

    .problem-imgs {
        display: inline-block;
        justify-content: space-between;
        width: 100%;
    }
    .problem-imgs li {
        width: 48%;
        margin: 0 1%;
        float: left;
        height: 250px;
    }

    .problem-imgs li img {
        width: 100%;
    }

    .problem-imgs li p {
        text-align: center;
        padding-top: 10px;
    }
    .effect{
        width: 100%;
        min-width: 200px;
        margin: 0 auto 30px;
    }
    .effect-text-title {
        width: 20%;
        min-width: 200px;
        height: 40px;
        border-radius: 10px 10px 0 0;
        background-color: #000040;
        font-size: 1.3rem;
        text-align: center;
        padding-top: 7px;
        color: #fff;
    }
    .headline {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .headline .image {
        width: 80%;
        padding: 0;
    }
    .headline .overview {
        width: 90%;
        margin: auto;
    }
    .headline .catchcopy {
        padding: 10px;
        margin-top: 20px;
    }
    .headline .btns {
        padding: 0;
    }
}

.flex.yoryo{
    max-width: 800px;
    display: flex;
}

.flex.yoryo .cnt{
    max-width: 20%;
    margin: 0;
    padding: 0;
}

.flex.yoryo.dai .cnt{
    max-width: 50%;
    margin: 0;
    padding: 0;
    text-align: center;
}

.flex.yoryo img{
    width: 100%;
}

.flex.yoryo .btn {
    display: inline-block;
    /* width: 150px; */
    max-width: 100%;
    padding: 5px 20px;
    margin: 0 3px;
    color: #fff;
    background: #1c2a75;
    /*     border: #3f3d3d 1px solid; */
    /* border-bottom: #3f3d3d 1px solid; */
    font-size: 16px;
    text-decoration: none;
    text-align: center;
    line-height: 1.5em;
}

.flex.yoryo .btn:hover {
    background: #a3d9e0;
}

@media screen and (max-width: 600px) {
    .flex.yoryo .btn {
        padding: 5px 5px;
        font-size: 14px;
    }
}

.privacy li{
    margin: 1rem;
}

.privacy li ul li{
    margin: 0;
}



span.b{
    font-weight: 600;
}
span.red{
    color: #d90000;
}
span.blue{
    color: #297fdf;
}
span.sen {
    text-decoration: underline
}

.box {
    margin: 20px auto;
    border: solid 1px #d90000;
    padding: 10px;
    max-width: 1000px;
}

.box p {
    font-size: 1.1em;
}

.box span.title {
    font-size: 1.4em;
    font-weight: 500;
    color: #d90000;
}

.center{
    text-align: center;
    margin:  0 auto;
}

@media screen and (max-width: 600px) {
    .box span.title {
        font-size: 1.2em;
    }
    .box p {
        font-size: 1em;
    }
}

span.big{
    font-size: 1.5rem;
    padding: 0 0.3rem;
}

.fvContact {
    background-image: url(../img/contact/fvContact.jpg);
}

@media screen and (max-width: 767px) {
    .fvContact .title {
        font-size: 1rem;
    }
}

.fvCampaign {
    background-image: url(../img/campaign/fvCampaign.jpg);
}

@media screen and (max-width: 767px) {
    .fvCampaign .title {
        font-size: 1rem;
    }
}


/* 20220818 QandA追加 */
.question_dl {
    z-index: 1;
    position: relative;
    margin-top: 15px;
    background-color: #f0f0f0;
    padding: 15px;
    position: relative;
    border-radius: 15px;
}


.question_dl h2 {
    position: relative;
    padding-left: 55px;
    padding-right: 30px;
    font-size: 1.4rem;
    font-weight: bold;
    color: #000040;
    font-family: 'ヒラギノ角ゴ pro';
    text-align: left;
}
.question_dl.shojo h2 {
    padding-left: 30px;
}
.question_dl h2::before {
    content: '';
    position: absolute;
    display: block;
    top: -5px;
    left: 10px;
    content: 'Q.';
    font-size: 1.8rem;
    color: #000040;
    font-family: "ヒラギノ明朝 pro", "游明朝", "Yu Mincho", "YuMincho", "yumincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "メイリオ", "Meiryo", serif;
    font-weight: 400;
}
.question_dl.shojo h2::before {
    content: none;
}
.answer_dl {
    position: relative;
    display:block;
    z-index: 0;
    padding: 30px 20px 30px 30px;
    margin-top: 20px;
}

.answer_dl ul li p {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.answer_dl p {
    line-height: 2;
}

.answer_dl p .red {
    color: #900000;
}





@media screen and (max-width: 767px) {
    .question_dl p {
        font-size: 1rem;
        padding-left: 45px;
        padding-right: 20px;
    }
    .question_dl p::before {
        font-size: 1.5rem;
        top: -7px;
    }
    .answer_dl {
        padding: 15px;
    }
    .answer_dl p {
        line-height: 1.8;
    }

}



.question_cs {
    z-index: 1;
    position: relative;
}

.question_cs::after {
    content: '\279C';
    font-size: 2.6rem;
    font-weight: bold;
    color: #000040;
    font-family: 'ヒラギノ角ゴ pro';
    display: block;
    position: absolute;
    width: 23px;
    height:23px;
    right: 20px;
    top: -10px;
    -webkit-transition: 0.3s all 0s ease;
    transition: 0.3s all 0s ease;
}

.question_cs p {
    position: relative;
    padding-left: 55px;
    padding-right: 40px;
    font-size: 1.4rem;
    font-weight: bold;
    color: #000040;
    font-family: 'ヒラギノ角ゴ pro';
}

.question_cs p::before {
    content: '';
    position: absolute;
    display: block;
    top: -5px;
    left: 10px;
    content: 'Q.';
    font-size: 1.8rem;
    color: #000040;
    font-family: "ヒラギノ明朝 pro", "游明朝", "Yu Mincho", "YuMincho", "yumincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "メイリオ", "Meiryo", serif;
    font-weight: 400;
}

@media screen and (max-width: 767px) {
    .list {
        padding: 10px;
    }
    .question_cs::after {
        width: 15px;
        top: -6px;
        font-size: 1.7rem;
        right: 10px;
    }
    .question_cs p {
        font-size: 1rem;
        padding-left: 45px;
        padding-right: 20px;
    }
    .question_cs p::before {
        font-size: 1.5rem;
        top: -7px;
    }
}

#CD-single p.des {
    line-height: 1.5;
    color: #737373;
    font-size: 0.9rem;
    margin-top: 10px;
    text-align: center;
    background: none;
}

#CD-single span.italic {
    font-style: italic;
    /* font-weight: bold; */
    /* font-family: serif; */
    font-weight: 300;
}

.en {
    padding: 0.5em;
    color: #494949;
    background: #edf4ffde;
    border-left: solid 7px #41385e;
}
.enUL{
    border-bottom: dashed 2px #d30000;
}

.entext{
    margin-bottom:20px;
}

.infobox a{
    font-size:1.6rem;
    font-weight:550;
    color:#2196F3;
}
.infobox a:hover{
    color:#62b7faa3;
}


/*OEM*/
.oem_contents {
    margin-top: 120px;
}
.oem_title {
    font-size: 34px;
    color: #fff;
    background-color: #4f71be;
    padding: 10px 10px 10px 30px;
}
@media only screen and (max-width:768px) {
    .oem_title {
        font-size: 22px;
        text-align: center;
        padding: 6px;
    }
}

.oem_text {
    font-size: 18px;
    line-height: 2;
    color: #363636;
    margin-top: 24px
}
.oem_contents h3{
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-family: 'ヒラギノ角ゴシック', sans-serif;
    font-weight: 600;
}
.oem_text h2 {
    font-size: 1.85rem;
    font-family: "ヒラギノ明朝 pro", "游明朝", "Yu Mincho", "YuMincho", "yumincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "メイリオ", "Meiryo", serif;
    font-weight: bold;
    color: #878787;
    margin-bottom: 1rem;
}

@media screen and (max-width: 767px) {
    .oem_text h2 {
        font-size: 1.5rem;
    }
}
.oem_contents{
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.content_wrap {
    margin-top: 80px;
}

.oem_contents .content  {
    justify-content: space-between;
}

.oem_contents .content.row-reverse  {
    flex-direction: row-reverse;
    margin-top: 40px;
}

.oem_contents .content p {
    font-size: 18px;
    line-height: 2;
    color: #363636;
}

.oem_contents .content .left {
    width: 48%;
}

.oem_contents .content .right {
    width: 48%;
}
@media only screen and (max-width:767px) {
    .oem_contents .content.row-reverse  {
        flex-direction: column;
        margin-top: 40px;
    }
    .oem_text {
        font-size: 16px;
    }
    .oem_contents .content p {
        font-size: 16px;
    }
}



/* 症状ページ */
.fvSymptom{
    background-image: url(../img/symptom/fvSymptom.jpg);
}
#symptom p {
    line-height: 2;
}
.symptom h2 {
    text-align: center;
    font-size: 1.85rem;
    font-weight: bold;
    font-family: "ヒラギノ明朝 pro", "游明朝", "Yu Mincho", "YuMincho", "yumincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "メイリオ", "Meiryo", serif;
    color: #878787;
}
.symptom .content {
    margin-top: 20px;
    padding: 0 40px;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
}

.symptom .content .left {
    width: calc(100% - 433px);
    margin-right: 40px;
}

.symptom .content .left.w70 {
    width: calc(100% - 300px);
    margin-right: 40px;
}
.symptom .content .right img {
    width: 300px;
}

.symptom .content.x {flex-direction: row-reverse;}

.symptom h3 {
    font-size: 1.3rem;
    font-weight: 600;
    font-family: "ヒラギノ角ゴシック", "ヒラギノ角ゴシック pro", sans-serif;
    color: #585858;
    background: #eef5fa;
    padding: 0.2rem 0.8rem 0;
    margin-bottom: 0.8rem;
    border-left: solid 5px #5b9dd6;
}

@media screen and (max-width: 767px) {
    .symptom .container {
        padding: 40px 15px;
    }
    .symptom .content {
        padding: 0;
    }
    .symptom .content .left {
        margin-right: 0;
    }
    .symptom .content .left h3 {
        font-size: 1.2rem;
    }
    .symptom .content .right {
        max-width: 100%;
    }
}

#symptom .self-manu .card{
    display: none;
    margin: 1%;
}
#symptom .card_03.hyakusogan .card.hyakusogan {
    display: block;
}
#symptom .card_03.hyakusoita .card.hyakusoita {
    display: block;
}
#symptom .card_03.UII .card.UII {
    display: block;
}
#symptom .card_03.chosoyaku .card.chosoyaku {
    display: block;
}
#symptom .qa-lists{
    display: flex;
    flex-wrap: wrap;
}
#symptom .list {
    width: 24%;
    margin: 0.5%;
}
#symptom .question_cs p::before {
    content: none;
}
#symptom .question_cs p {
    padding: 0;
    line-height: 1.6;
    text-align: center;
}

#symptom .question_cs::after {
    content: none;
}

.answer_dl p{
    padding: 1rem 1rem 1.5rem 1rem;
}

#symptom .gimon{
    padding-bottom: 0;
}

#symptom h4{
    text-align: center;
    padding-bottom: 2rem;
}


.c-plan-item.blog {
    padding-bottom: 10px;
    max-width: 300px;
    margin-right: 0;
    margin: 0 20px;
    box-shadow: 2px 2px 4px 1px #c3c3c3;
}

.c-plan-item.blog time {
    font-size: 0.8rem;
    padding-left: 5px;
}

 .text-danger {
     font-size: 0.8rem;
     padding: 10px 10px 0;
     color: #5799d6;
 }

.c-plan-group__wrap.swiper-wrapper.blog img {
    max-width: 400px;
    width: 100%;
    max-height: 200px;
    /* padding: 15px; */
    object-fit: cover;
    border-radius: 5px 5px 0 0;
}

.c-plan-group__wrap.swiper-wrapper.blog a {
    text-decoration: none;
    padding: 0 0 20px;
    display: block;
    text-align: center;
    border-radius: 5px;
}

.c-background-1.blog {
    background: none;
}

.swiper-container-free-mode>.swiper-wrapper {
    margin-bottom: 20px !important;
}

.footer__top {
    background: #fff;
}

.footer__top .flex_box {
    display: flex;
    justify-content: center;
    max-width: 1360px;
    width: 100%;
    padding: 30px 80px 80px;
    margin: auto;
}

.footer__top .flex_box .left_area {
    display: flex;
    width: 30%;
    max-width: 200px;
    height: 130px;
    margin: auto;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    padding: 10px 15px;
    border: 1px solid #dddddd78;
    border-radius: 15px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 2;
}

.footer__top .flex_box .left_area:before {
  content: "";
  position: absolute;
  right: -19px; /* 吹き出しの下端に追加 */
  top: 50%;
  transform: translateY(-50%);
  border-width: 10px 0 10px 22px;
  border-style: solid;
  border-color: transparent transparent transparent #ffffff;
  z-index: 1;
}
.footer__top .flex_box .left_area:after {
  content: "";
  position: absolute;
  right: -21px; /* 吹き出しの下端に追加 */
  top: 50%;
  transform: translateY(-50%);
  border-width: 11px 0 11px 23px;
  border-style: solid;
  border-color: transparent transparent transparent #dddddd78;
  z-index: 0; /* 下のレイヤーに配置 */
}

.footer__top .flex_box .left_area .txt_area {
    width: calc(100% - 80px);
    text-align: center;
}

.footer__top .flex_box .left_area p {
    color: #363636;
}

.footer__top .flex_box .left_area .img_area {
    width: 80px;
}

.footer__top .flex_box .left_area img {
    width: 100%;
    max-width: 80px;
    height: auto;
}

.footer__top .flex_box .right_area {
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: auto;
}

.footer__top .flex_box .right_area .right_area__top {
    display: flex;
    gap: 10px;
}

.footer__top .flex_box .right_area .right_area__top a {
    flex: 1 1 calc(50% - 5px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 20px;
    /* margin: 20px auto; */
    border: 1px solid #000040;
    position: relative;
}

.footer__top .flex_box .right_area .right_area__top .img_area{
    width: 40px;
}
.footer__top .flex_box .right_area .right_area__top .txt_area {
    width: calc(100% - 40px);
    padding-left: 20px;
}

.footer__top .flex_box .right_area .right_area__top .txt_area p {
    font-size: 1rem;
}

.footer__top .flex_box .right_area .right_area__top .txt_area span {
    font-size: 0.7rem;
}

.footer__top .flex_box .right_area .right_area__top a img {
    width: 100%;
    max-width: 40px;
}

.footer__top .flex_box .right_area .right_area__bottom {
    display: flex;
    gap: 10px;
}

.footer__top .flex_box .right_area .right_area__bottom a {
    flex: 1 1 calc(33.33% - 6.67px);
    padding: 15px 20px;
    /* margin: 20px auto; */
    border: 1px solid #000040;
    position: relative;
}

.footer__top .flex_box .right_area a:after {
    font-family: 'themify';
    content: "\e649";
}

.footer__top .flex_box .right_area .right_area__bottom a:after,
.footer__top .flex_box .right_area .right_area__top a:after{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 5px;
}

@media screen and (max-width: 1024px) {
    .footer__top .flex_box {
        flex-direction: column;
        gap: 20px;
        padding: 30px 50px 80px;
    }

    .footer__top .flex_box .left_area:before {
        right: auto;
        top: auto;
        left: 50%;
        border-width: 16px 0 16px 13px;
        transform: translateX(-50%) rotate(90deg);
        bottom: -20px;
    }

    .footer__top .flex_box .left_area:after {
        right: auto;
        top: auto;
        left: 50%;
        transform: translateX(-50%) rotate(90deg);
        bottom: -22px;
        border-width: 17px 0 17px 14px;
    }

    .footer__top .flex_box .right_area {
        width: 100%;
        gap: 10px;
    }

    .footer__top .flex_box .left_area {
        max-width: 250px;
        width: 100%;
    }
}

@media screen and (max-width: 735px) {
    .footer__top .flex_box .right_area .right_area__top,
    .footer__top .flex_box .right_area .right_area__bottom {
        flex-direction: column;
    }

    .footer__top .flex_box .right_area .right_area__bottom a {
        margin: 0;
    }
}