/* Reset CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*--Responsive--*/
@media screen and (max-width: 1299px){
}
@media screen and (max-width: 1024px){
}
@media screen and (max-width: 991px){
}
@media screen and (max-width: 767px){
}
@media screen and (max-width: 481px){
}
@media screen and (max-width: 380px){
}

/*--------------------------------------------------------------
## Basic Styles
--------------------------------------------------------------*/
body {
    color: #2F2F2F;
    font-size: 16px;
    line-height: 1.4;
    overflow-x: hidden;
    background-color: #fff;
    font-family: "Noto Sans JP", sans-serif;
}
header {
    padding: 0;
    background-color: #fff;
}
h1, h2, h3, h4, h5, h6 {
    color: #2F2F2F;
    text-align: center;
    margin-bottom: 10px;
}
ul, ol {
    margin-left: 0;
    list-style-type: none;
}
p {
    margin-bottom: 20px;
}
a {
    cursor: pointer;
    text-decoration: none;
}
a:hover {
    opacity: .5;
    transition: all 0.6s;
}
img {
    max-width: 100%;
}

/*--------------------------------------------------------------
## Common Styles
--------------------------------------------------------------*/
.outer {
	padding: 120px 0;
	background-color: #fff;
}
.wrapper {
	margin: 0 auto;
	max-width: 1230px;
	padding-left: 20px;
	padding-right: 20px;
}
.flex {
	display: flex;
	flex-wrap: wrap;
}
.ttl {
    font-family: 'M PLUS Rounded 1c', sans-serif;
}
.eng {
    font-family: 'Montserrat', sans-serif;
}
.jpn {
    font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
}
.center{
    text-align: center;
}
.bold {
    font-weight: bold;
}
.wave {
    margin: 0 0 40px;
    padding: 60px 20px;
    position: relative;
    background: #F2F5FC;
}
.wave::after {
    content: "";
    left: 0;
    bottom: -40px;
    width: 100%;
    height: 50px;
    position: absolute;
    transform: scaleY(-1);
    display: inline-block;
    background-image: url(../img/triangle.png);
}
.wave h2.ttl {
    font-size: 32px;
}
.sp {
    display: none;
}

/*--Responsive--*/
@media screen and (max-width: 1299px){
}
@media screen and (max-width: 1024px){
}
@media screen and (max-width: 991px){
}
@media screen and (max-width: 767px){
    .outer {
        padding: 60px 0;
    }
    .sp {
        display: block;
    }
    .pc {
        display: none!important;
    }
    .wave {
        padding: 40px 20px;
    }
    .wave::after {
        bottom: -25px;
        background-size: 60px;
    }
    .wave h2.ttl {
        font-size: 24px;
    }
}
@media screen and (max-width: 481px){
}
@media screen and (max-width: 380px){
}

/*--------------------------------------------------------------
## Header Styles
--------------------------------------------------------------*/
.head .inner {
    width: 100%;
    height: 80px;
    padding-left: 60px;
    padding-right: 140px;
    align-items: center;
    justify-content: space-between;
}
.head .logo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.head .logo h1 {
    margin: 0;
    width: 100%;
    font-size: 20px;
    color: #3B4043;
    font-weight: 700;
    text-align: left;
}
.head .logo p {
    margin: 0;
    font-size: 12px;
    color: #707F89;
}
.head .h-link li {
    margin-left: 40px;
}
.head .h-link li a {
    display: block;
    color: #3B4043;
    font-weight: 700;
    background-repeat: no-repeat;
    background-position: center left;
}
.head .h-link li:nth-child(1) a {
    padding-left: 35px;
    background-image: url(../img/h-magnifying.png);
}
.head .h-link li:nth-child(2) a {
    padding-left: 45px;
    background-image: url(../img/h-login.png);
}

/*--Responsive--*/
@media screen and (max-width: 1299px){
}
@media screen and (max-width: 1024px){
}
@media screen and (max-width: 991px){
    .head .inner {
        height: 70px;
        padding: 0 15px;
    }
    .head .h-link {
        display: none;
    }
}
@media screen and (max-width: 767px){
}
@media screen and (max-width: 481px){
}
@media screen and (max-width: 380px){
}

/*--------------------------------------------------------------
## Hamburger Menu Styles
--------------------------------------------------------------*/
#g-nav {
    position: fixed;
    z-index: 999;
    top: 0;
    right: -120%;
    width: 100%;
    height: 100vh;
    transition: all 0.6s;
    background: rgb(0 0 0 / 93%);
}
#g-nav.panelactive {
    right: 0;
}
#g-nav.panelactive #g-nav-list {
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
#g-nav ul {
    position: absolute;
    z-index: 999;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
#g-nav li {
    list-style: none;
    text-align: center;
}
#g-nav li a {
    color: #fff;
    text-decoration: none;
    padding: 10px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: bold;
}
.openbtn1 {
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    z-index: 9999;
    cursor: pointer;
    position: absolute;
    background: #004BB1;
}
.openbtn1 span {
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 15px;
    height: 5px;
    /*border-radius: 2px;*/
    background-color: #fff;
    width: calc(100% - 30px);
}
.openbtn1 span:nth-of-type(1) {
    top: 22px;
}
.openbtn1 span:nth-of-type(2) {
    top: 37px;
}
.openbtn1 span:nth-of-type(3) {
    top: 52px;
    width: calc(80% - 30px);
}
.openbtn1.active span:nth-of-type(1) {
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(45deg);
    width: 50%;
}
.openbtn1.active span:nth-of-type(2) {
  opacity: 0;
}
.openbtn1.active span:nth-of-type(3){
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(-45deg);
    width: 50%;
}

/*--Responsive--*/
@media screen and (max-width: 1299px){
}
@media screen and (max-width: 1024px){
}
@media screen and (max-width: 991px){
    .openbtn1 {
        width: 70px;
        height: 70px;
    }
    .openbtn1 span {
        height: 4px;
    }
    .openbtn1 span:nth-of-type(1) {
        top: 20px;
    }
    .openbtn1 span:nth-of-type(2) {
        top: 33px;
    }
    .openbtn1 span:nth-of-type(3) {
        top: 46px;
    }
}
@media screen and (max-width: 767px){
}
@media screen and (max-width: 481px){
}
@media screen and (max-width: 380px){
}

/*--------------------------------------------------------------
## Hero Section Styles
--------------------------------------------------------------*/
.hero {
    height: calc(100vh - 80px);
    position: relative;
}
.hero-background {
    height: 100%;
    background-size: cover;
    background-position: center center;
}
.hero-content {
    top: 50%;
    left: 50%;
    width: 800px;
    text-align: center;
    position: absolute;
    transform: translate(-50%, -50%);
}
.hero-content h1.ttl, .hero-content h2.ttl {
    font-size: 48px;
    font-weight: 700;
    color: #FFFFFF;
    text-align: center;
    margin-bottom: 60px;
    text-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
}
.hero-content .search {
    border-radius: 8px;
    padding: 40px 80px;
    background: #fff;
}
.hero-content .search p.txt {
    font-weight: bold;
}
.hero-content .search a.btn {
    width: 500px;
    color: #fff;
    margin: 0 auto;
    display: block;
    line-height: 2;
    font-weight: bold;
    border-radius: 5px;
    padding: 10px 60px;
    margin-bottom: 15px;
    background: #1A9EFF;
}
.hero-content .search span {
    padding-left: 40px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center left;
    background-image: url(../img/s-maker.png);
}
.hero-content .search .search-form {
    width: 500px;
    height: 45px;
    margin: 0 auto;
    display: flex;
    overflow: hidden;
    align-items: center;
    border: 1px solid #989898;
    justify-content: space-between;
}
.hero-content .search .search-form label {
    width: 460px;
    height: 45px;
}
.hero-content .search .search-form input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    font-size: 16px;
    color: #B7B7B7;
    font-weight: bold;
    padding: 5px 15px;
    text-align: center;
    box-sizing: border-box;
    font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
}
.hero-content .search .search-form input::placeholder {
    font-size: 16px;
    color: #B7B7B7;
    font-weight: bold;
    font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
}
.hero-content .search .search-form button {
    width: 40px;
    height: 45px;
    border: none;
    display: flex;
    cursor: pointer;
    background: #fff;
    align-items: center;
    justify-content: flex-start;
    background-color: transparent;
}
.hero-content .search .search-form button::after {
    content: '';
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-image: url(../img/s-magnifying.png);
}

/*--Responsive--*/
@media screen and (max-width: 1299px){
}
@media screen and (max-width: 1024px){
}
@media screen and (max-width: 991px){
    .hero-content {
        width: 100%;
        padding: 0 15px;
    }
}
@media screen and (max-width: 767px){
    .hero {
        height: calc(100vh - 70px);
    }
    .hero-background {
        background-position: 30% center;
    }
    .hero-content h2.ttl {
        font-size: 32px;
        margin-bottom: 80px;
    }
    .hero-content .search {
        padding: 25px 20px;
    }
    .hero-content .search p.txt {
        font-size: 14px;
    }
    .hero-content .search a.btn {
        width: 100%;
    }
    .hero-content .search .search-form {
        width: 100%;
    }
    .hero-content .search .search-form label {
        width: calc(100% - 40px);
    }
}
@media screen and (max-width: 481px){
}
@media screen and (max-width: 380px){
}

/*--------------------------------------------------------------
## Common Styles
--------------------------------------------------------------*/
.outer h2.ttl span {
    display: block;
    text-align: center;
}
.outer h2.ttl span.jpn {
    font-size: 16px;
    font-weight: bold;
}
.outer h2.ttl span.eng {
    font-size: 48px;
    color: #008CFF;
    line-height: 1.2;
}
.b-link a {
    font-size: 23px;
    color: #2F2F2F;
    font-weight: bold;
}
.follow {
    bottom: 20%;
    z-index: 999;
    right: -270px;
    position: fixed;
    transition: all 0.6s;
}
.follow:hover {
    right: 0;
    opacity: 1;
}
.cover {
    display: none;
    position: fixed;
    z-index: 99;
    top: 0;
    right: -120%;
    width: 100%;
    height: 100vh;
    transition: all 0.6s;
    background: rgb(0 0 0 / 50%);
}
.cover.coveractive {
    right: 0;
}
.search a.btn {
    width: 500px;
    color: #fff;
    margin: 0 auto;
    display: block;
    line-height: 2;
    font-weight: bold;
    border-radius: 5px;
    padding: 10px 60px;
    text-align: center;
    margin-bottom: 15px;
    background: #1A9EFF;
}
.search span {
    padding-left: 40px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center left;
    background-image: url(../img/s-maker.png);
}
.search .search-form {
    width: 500px;
    height: 45px;
    margin: 0 auto;
    display: flex;
    overflow: hidden;
    align-items: center;
    border: 1px solid #989898;
    justify-content: space-between;
}
.search .search-form label {
    width: 460px;
    height: 45px;
}
.search .search-form input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    font-size: 16px;
    color: #B7B7B7;
    font-weight: bold;
    padding: 5px 15px;
    text-align: center;
    box-sizing: border-box;
    font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
}
.search .search-form input::placeholder{
    font-size: 16px;
    color: #B7B7B7;
    font-weight: bold;
    font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
}
.search .search-form button {
    width: 40px;
    height: 45px;
    border: none;
    display: flex;
    cursor: pointer;
    background: #fff;
    align-items: center;
    justify-content: flex-start;
}
.search .search-form button::after {
    content: '';
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-image: url(../img/s-magnifying.png);
}

/*--Responsive--*/
@media screen and (max-width: 1299px){
}
@media screen and (max-width: 1024px){
}
@media screen and (max-width: 991px){
}
@media screen and (max-width: 767px){
    .outer h2.ttl span.jpn {
        font-size: 14px;
    }
    .outer h2.ttl span.eng {
        font-size: 32px;
    }
    .cover {
        display: block;
    }
    .b-link a {
        font-size: 18px;
    }
    .follow {
        bottom: 40%;
        right: -210px;
    }
    .search a.btn {
        width: 100%;
    }
    .search .search-form {
        width: 100%;
    }
    .search .search-form label {
        width: calc(100% - 40px);
    }
}
@media screen and (max-width: 481px){
}
@media screen and (max-width: 380px){
}

/*--------------------------------------------------------------
## Post Styles
--------------------------------------------------------------*/
.post {
    margin: 0 0 30px;
    flex-wrap: nowrap;
    justify-content: center;
}
.post .item {
    width: 380px;
    flex-shrink: 0;
    display: block;
    background: #fff;
    border-radius: 5px;
    margin-right: 30px;
    /*border: 1px solid #B1B1B1;*/
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);
}
.post .item:last-child {
    margin-right: 0;
}
.post .item .img {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
}
.post .item .img::before {
    content: "";
    display: block;
    padding-top: 56.25%;
}
.post .item .txt {
    padding: 30px;
}
.post .item .ttl {
    font-size: 20px;
    margin: 0 0 6px;
    color: #2F2F2F;
    font-weight: bold;
    font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
}
.post .item .auth {
    font-size: 14px;
    margin: 0 0 6px;
    color: #707070;
    font-weight: bold;
}
.post .item .des {
    margin: 0 0 6px;
    color: #2F2F2F;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
}
.post .item .tag {
    display: flex;
    flex-wrap: wrap;
}
.post .item .tag span {
    font-size: 12px;
    color: #2F2F2F;
    font-weight: bold;
    padding: 3px 10px;
    border-radius: 3px;
    margin-right: 12px;
    background: #EAEAEA;
}

/*--Responsive--*/
@media screen and (max-width: 1299px){
    .post .item {
        width: 325px;
        margin-right: 15px;
        box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.15);
    }
}
@media screen and (max-width: 1024px){
    .post {
        overflow-x: scroll;
        justify-content: flex-start;
    }
    .post .item {
        margin-right: 0;
        margin-left: 15px;
        margin-bottom: 30px;
    }
}
@media screen and (max-width: 991px){
}
@media screen and (max-width: 767px){
}
@media screen and (max-width: 481px){
    .post .item {
        width: 85%;
    }
    .post .item .txt {
        padding: 20px;
    }
    .post .item .ttl {
        font-size: 18px;
    }
}
@media screen and (max-width: 380px){
}

/*--------------------------------------------------------------
## Front Page Column Section Styles
--------------------------------------------------------------*/
.column h2.ttl {
    margin: 0 auto 30px;
    max-width: 560px;
    background-repeat: no-repeat;
    background-position: bottom left, bottom right;
    background-image: url(../img/column-ttl01.png), url(../img/column-ttl02.png);
}
.column h3.ttl{
    font-size: 25px;
    color: #FFC810;
    margin-bottom: 15px;
}
.column .link {
    margin-bottom: 30px;
    justify-content: center;
}
.column .tag a {
    font-size: 18px;
    color: #2F2F2F;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 3px;
    margin-right: 20px;
    background: #EAEAEA;
}

/*--Responsive--*/
@media screen and (max-width: 1299px){
}
@media screen and (max-width: 1024px){
}
@media screen and (max-width: 991px){
}
@media screen and (max-width: 767px){
    .column h2.ttl {
        max-width: 300px;
        background-size: 65px;
    }
    .column .tag a {
        font-size: 16px;
        margin-right: 15px;
        margin-bottom: 10px;
    }
}
@media screen and (max-width: 481px){
}
@media screen and (max-width: 380px){
}

/*--------------------------------------------------------------
## Front Page News Section Styles
--------------------------------------------------------------*/
.news {
    margin: 50px 0;
    padding: 80px 0;
    position: relative;
    background: #F2F5FC;
}
.news::before {
    content: "";
    left: 0;
    top: -45px;
    width: 100%;
    height: 50px;
    position: absolute;
    display: inline-block;
    background-image: url(../img/triangle.png);
}
.news::after {
    content: "";
    left: 0;
    bottom: -45px;
    width: 100%;
    height: 50px;
    position: absolute;
    display: inline-block;
    transform: scaleY(-1);
    background-image: url(../img/triangle.png);
}
.news .wrapper {
    position: relative;
}
.news .icon {
    right: 0;
    top: -120px;
    position: absolute;
}
.news h2.ttl {
    margin: 0 0 30px;
}

/*--Responsive--*/
@media screen and (max-width: 1299px){
}
@media screen and (max-width: 1024px){
}
@media screen and (max-width: 991px){
}
@media screen and (max-width: 767px){
    .news {
        padding: 30px 0;
    }
    .news .icon {
        display: none;
    }
    .news::before {
        top: -25px;
        background-size: 60px;
    }
    .news::after {
        bottom: -25px;
        background-size: 60px;
    }
}
@media screen and (max-width: 481px){
}
@media screen and (max-width: 380px){
}

/*--------------------------------------------------------------
## Front Page Solution Section Styles
--------------------------------------------------------------*/
.solution {
    padding: 120px 0 200px;
    background-size: 100% 55%;
    background-position: bottom;
    background-repeat: no-repeat;
    background-image: url(../img/stripe.png);
}
.solution h2.ttl {
    font-size: 32px;
    margin: 0 0 30px;
}
.solution h2.ttl span {
    padding: 0 10px;
    font-size: 52px;
    color: #65849F;
    display: inline-block;
}
.solution h4.ttl {
    padding: 10px;
    margin: 0 auto;
    font-size: 24px;
    max-width: 920px;
    font-weight: bold;
    border-radius: 20px;
    background: #FFC810;
}
.solution .sol01 {
    margin: 0 0 60px;
    padding: 10px 0 0;
    justify-content: center;
}
.solution .sol01 .item {
    width: 380px;
    margin-top: 35px;
    background: #fff;
    margin-right: 20px;
    text-align: center;
    position: relative;
    border-radius: 10px;
    padding: 0 10px 30px;
    box-shadow: 0px 0px 5px #0089FF;
}
.solution .sol01 .item:last-child {
    margin-right: 0;
}
.solution .sol01 .item .ellipse {
    left: 50%;
    top: -35px;
    z-index: 1;
    position: absolute;
    transform: translate(-50%, 0);
    filter: drop-shadow(0px 0px 3px #0089FF);
}
.solution .sol01 .item .inner {
    z-index: 2;
    position: relative;
    background: #fff;
}
.solution .sol01 .item .num {
    font-size: 83px;
    color: #FFC810;
    font-weight: bold;
}
.solution .sol01 .item h3.ttl {
    font-size: 28px;
    margin: 0 0 15px;
    color: #50AEFF;
    font-weight: bold;
}
.solution .sol01 .item .img {
    max-width: 100%;
    margin: 0 0 15px;
}
.solution .sol02 {
    margin: 0 0 30px;
    justify-content: center;
}
.solution .sol02 .item {
    width: 380px;
    margin-right: 20px;
    text-align: center;
    position: relative;
}
.solution .sol02 .item:last-child {
    margin-right: 0;
}
.solution .sol02 .item p {
    z-index: 1;
    padding: 20px;
    font-size: 22px;
    font-weight: bold;
    margin: -60px 0 0;
    position: relative;
    background: #fff;
    border-radius: 10px;
    border: 3px solid #50AEFF;
}
.solution .sol02 .item img {
    max-width: 100%;
}
.solution .sol02 .item span {
    right: -5px;
    bottom: -5px;
    width: 100%;
    padding: 20px;
    display: block;
    font-size: 22px;
    position: absolute;
    border-radius: 10px;
    background: #50AEFF;
    border: 3px solid #50AEFF;
}

/*--Responsive--*/
@media screen and (max-width: 1299px){
    .solution .sol01 .item {
        width: 335px;
        margin-bottom: 25px;
    }
    .solution .sol01 .item:last-child {
        margin-right: 30px;
    }
    .solution .sol02 .item {
        width: 280px;
    }
    .solution .sol02 .item p {
        font-size: 18px;
    }
    .solution .sol02 .item span {
        font-size: 18px;
    }
}
@media screen and (max-width: 1024px){
}
@media screen and (max-width: 991px){
    .solution h2.ttl span {
        display: block;
    }
    .solution .sol02 .item {
        margin-bottom: 30px;
    }
    .solution .sol02 .item:last-child {
        margin-right: 30px;
    }
}
@media screen and (max-width: 767px){
    .solution {
        padding: 60px 0;
    }
    .solution h2.ttl {
        font-size: 24px;
    }
    .solution h2.ttl span {
        padding: 0;
        font-size: 40px;
    }
    .solution .sol01 .item,
    .solution .sol01 .item:last-child {
        margin-right: 0;
    }
    .solution .sol01 .item h3.ttl {
        font-size: 24px;
    }
    .solution .sol02 .item,
    .solution .sol02 .item:last-child {
        margin-right: 0;
    }
    .solution h4.ttl {
        font-size: 18px;
    }
}
@media screen and (max-width: 481px){
}
@media screen and (max-width: 380px){
}

/*--------------------------------------------------------------
## Front Page Explain Section Styles
--------------------------------------------------------------*/
.explain .img {
    width: 550px;
    margin: 0 0 60px;
    background-size: cover;
}
.explain .img::before {
    content: "";
    display: block;
    padding-top: 100%;
}
.explain .img01 {
    background-image: url(../img/exp01.png);
}
.explain .img02 {
    background-image: url(../img/exp02.png);
}
.explain .txt {
    display: flex;
    padding: 0 60px;
    margin: 0 0 60px;
    align-items: center;
    width: calc(100% - 550px);
}
.explain .txt span {
    display: block;
    font-size: 20px;
    margin: 0 0 15px;
    color: #FFC810;
    font-weight: bold;
}
.explain .txt h2.ttl {
    font-size: 32px;
    margin: 0 0 60px;
    text-align: left;
    color: #50AEFF;
    font-weight: bold;
}
.explain .txt p {
    line-height: 1.6;
}

/*--Responsive--*/
@media screen and (max-width: 1299px){
    .explain .wrapper {
        padding: 0;
    }
    .explain .txt {
        padding: 0 40px;
        margin: 0 0 40px;
    }
    .explain .txt h2.ttl br {
        display: none;
    }
}
@media screen and (max-width: 1024px){
}
@media screen and (max-width: 991px){
    .explain .img,
    .explain .txt {
        width: 100%;
    }
    .explain .img01 {
        margin-right: 60px;
    }
    .explain .img02 {
        margin-left: 60px;
    }
    .explain div:nth-child(3) {
        order: 4;
    }
}
@media screen and (max-width: 767px){
    .explain .txt {
        padding: 0 20px;
        margin: 0 0 20px;
    }
    .explain .img {
        margin-bottom: 20px;
    }
    .explain .img02 {
        margin-top: 60px;
    }
    .explain .txt h2.ttl {
        font-size: 24px;
        margin-bottom: 15px;
    }
    .explain .txt span {
        font-size: 16px;
        margin-bottom: 10px;
    }
}
@media screen and (max-width: 481px){
}
@media screen and (max-width: 380px){
}

/*--------------------------------------------------------------
## Front Page Find Section Styles
--------------------------------------------------------------*/
.find {
    margin: 50px 0;
    padding: 40px 0;
    text-align: center;
    position: relative;
    background: #F2F5FC;
}
.find::before {
    content: "";
    left: 0;
    top: -45px;
    width: 100%;
    height: 50px;
    position: absolute;
    display: inline-block;
    background-image: url(../img/triangle.png);
}
.find::after {
    content: "";
    left: 0;
    bottom: -45px;
    width: 100%;
    height: 50px;
    position: absolute;
    display: inline-block;
    transform: scaleY(-1);
    background-image: url(../img/triangle.png);
}
.find h2.ttl {
    max-width: 27em;
    font-size: 36px;
    font-weight: bold;
    margin: 0 auto 30px;
    padding: 0 85px 50px;
    background-repeat: no-repeat;
    background-position: bottom left, bottom right;
    background-image: url(../img/slash01.png), url(../img/slash02.png);
}
.find .wrapper .icon{
    top: 20px;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -100%);
}

/*--Responsive--*/
@media screen and (max-width: 1299px){
}
@media screen and (max-width: 1024px){
    .find h2.ttl {
        max-width: 30em;
        font-size: 24px;
        padding: 0 60px 20px;
    }
}
@media screen and (max-width: 991px){
}
@media screen and (max-width: 767px){
    .find {
        padding: 30px 0;
    }
    .find h2.ttl {
        font-size: 22px;
    }
    .find::before {
        top: -25px;
        background-size: 60px;
    }
    .find::after {
        bottom: -25px;
        background-size: 60px;
    }
    .find h2.ttl {
        padding: 0;
        max-width: 18em;
        background-size: 40px;
    }
    .find .wrapper .icon {
        width: 120px;
    }
}
@media screen and (max-width: 481px){
}
@media screen and (max-width: 380px){
}

/*--------------------------------------------------------------
## Front Page Banner Section Styles
--------------------------------------------------------------*/
.banner .flex {
    justify-content: center;
}
.banner .flex .item {
    margin-right: 30px;
}
.banner .flex .item:last-child {
    margin-right: 0;
}
.banner .flex .item img {
    max-width: 100%;
}

/*--Responsive--*/
@media screen and (max-width: 991px){
    .banner .flex .item {
        margin: 0 0 20px;
    }
}

/*--------------------------------------------------------------
## Footer Styles
--------------------------------------------------------------*/
footer {
    color: #fff;
    padding: 60px 20px;
    text-align: center;
    background: #50AEFF;
}
footer p{
    margin: 0;
    font-size: 10px;
}
.f-link {
    justify-content: center;
}
.f-link li {
    padding: 0 30px;
    margin: 0 0 30px;
    border-left: 1px solid #fff;
}
.f-link li:last-child {
    border-right: 1px solid #fff;
}
.f-link a {
    color: #fff;
}

/*--Responsive--*/
@media screen and (max-width: 767px){
    .f-link li {
        font-size: 14px;
        padding: 0 20px;
        margin: 0 0 20px;
    }
}
@media screen and (max-width: 481px){
}

/*--------------------------------------------------------------
## Map Page Styles
--------------------------------------------------------------*/
.map-hero {
    height: 500px;
    position: relative;
}
.map-hero-bg {
    height: 100%;
    background-size: cover;
    background-position: center center;
}
.map-hero-bg h2.ttl {
    top: 50%;
    left: 50%;
    width: 100%;
    color: #fff;
    font-size: 36px;
    padding: 0 20px;
    text-align: center;
    position: absolute;
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    transform: translate(-50%, -50%);
}
.map .sample {
    height: 500px;
    position: relative;
}
.map .sample .pin {
    top: 0;
    left: 0;
    position: absolute;
}
.map .sample .pin01 {
    top: 30%;
    left: 50%;
}
.map .sample .pin02 {
    top: 60%;
    left: 50%;
}
.map .sample .pin03 {
    top: 60%;
    left: 40%;
}
.map .sample .bubble {
    top: 30%;
    left: 60%;
    width: 215px;
    text-align: center;
    background: #fff;
    border-radius: 13px;
    padding: 0 34px;
}
.map .sample .bubble img {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
}
.map .sample .bubble p {
    margin: 4px 0;
    font-size: 16px;
    font-weight: bold;
}
.map .sample .bubble a {
    color: #fff;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 5px;
    display: inline-block;
    background: #2699FB;
}
.map .search {
    margin: 60px 0 0;
}

/*--Responsive--*/
@media screen and (max-width: 1299px){
    .map-hero {
        height: 300px;
    }
}
@media screen and (max-width: 1024px){
}
@media screen and (max-width: 991px){
}
@media screen and (max-width: 767px){
    .map-hero {
        height: 200px;
    }
    .map-hero-bg h2.ttl {
        font-size: 28px;
    }
    .map .sample .pin {
        width: 25px;
    }
    .map .sample .bubble {
        left: 40%;
        width: 140px;
        padding: 10px;
    }
    .map .sample .bubble::after {
        bottom: -16px;
        left: calc(50% - 5px);
        border-top: 17.32px solid #fff;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
    }
    .map .sample .bubble a {
        font-size: 12px;
    }
    .map .sample .bubble img {
        width: 80px;
        height: 80px;
    }
    .map .sample .pin01 {
        top: 30%;
        left: 30%;
    }
    .map .sample .pin02 {
        top: 60%;
        left: 30%;
    }
    .map .sample .pin03 {
        top: 60%;
        left: 10%;
    }
}
@media screen and (max-width: 481px){
}
@media screen and (max-width: 380px){
}

/*--------------------------------------------------------------
## Search & Result Page Styles
--------------------------------------------------------------*/
.keyword {
    padding: 60px 0;
}
.keyword .search {
    display: flex;
    justify-content: center;
}
.keyword .search a.btn {
    margin: 0;
    margin-right: 15px;
}
.keyword .search .search-form {
    margin: 0;
    height: 52px;
}
.keyword-ttl {
    padding: 60px 0;
    background: #D3EBFF;
}
.keyword-ttl h2.ttl {
    margin: 0;
    font-size: 24px;
}
.k-result {
    padding: 30px 0 120px;
}
.k-result ul.badge {
    margin: 0 0 60px;
    justify-content: space-around;
}
.k-result ul.badge02 {
    justify-content: center;
}
.k-result ul.badge02 li {
    margin-right: 30px;
}
.k-result ul.badge a {
    display: flex;
    color: #2f2f2f;
    padding: 10px 6px;
    font-weight: bold;
    align-items: center;
    border-radius: 10px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.25);
}
.k-result ul.badge02 a {
    padding: 6px 10px;
    font-size: 14px;
}
.k-result ul.badge02 a img {
    width: 20px;
    height: 20px;
}
.k-result .badge span {
    margin-left: 8px;
}
.k-result li.item {
    padding: 40px;
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 60px;
    background: #fff;
    border-radius: 10px;
    justify-content: center;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
}
.k-result li.item .img {
    width: 200px;
}
.k-result li.item .txt {
    width: calc(100% - 200px);
    padding-left: 30px;
}
.k-result li.item .name,
.k-result li.item .des {
    margin: 0 0 20px;
    line-height: 1.6;
}
.k-result li.item .name p {
    margin: 0 20px 0 0;
    font-size: 24px;
    font-weight: bold;
}
.k-result li.item .link {
    text-align: right;
}
.k-result li.item .link a {
    color: #2699FB;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 50px;
    display: inline-block;
    border: 1px solid #50AEFF;
}

.k-result #listTrainers li.item .txt img {
    /* width: 40px; */
    height: 40px;
    object-fit: cover;
    margin-left: 3px;
}

/*--Responsive--*/
@media screen and (max-width: 1299px){
}
@media screen and (max-width: 1024px){
}
@media screen and (max-width: 991px){
    .k-result ul.badge {
        justify-content: center;
    }
    .k-result ul.badge li{
        margin-right: 10px;
        margin-bottom: 15px;
    }
}
@media screen and (max-width: 767px){
    .keyword .search {
        flex-wrap: wrap;
    }
    .keyword .search a.btn {
        margin: 0 0 15px;
    }
    .k-result li.item {
        padding: 30px;
    }
    .k-result li.item .img {
        margin: 0 0 10px;
    }
    .k-result li.item .txt {
        padding: 0;
        width: 100%;
    }
    .k-result li.item .name,
    .k-result li.item .des {
        margin: 0 0 10px;
    }
}
@media screen and (max-width: 481px){
}
@media screen and (max-width: 380px){
}

/*--------------------------------------------------------------
## Profile Page Styles
--------------------------------------------------------------*/
.profile {
    background-color: rgba(255, 255, 255, 1);
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(246, 250, 253, 1) 10px, rgba(246, 250, 253, 1) 20px );
}
.profile h2.ttl {
    width: 50%;
    font-size: 24px;
    margin-bottom: 20px;
    padding-bottom: 60px;
}
.profile h3.ttl {
    font-size: 24px;
    color: #50AEFF;
    text-align: left;
    margin: 0 0 10px;
    padding: 10px 30px;
}
.profile h4.ttl {
    font-size: 24px;
    color: #50AEFF;
    text-align: left;
    margin: 0 0 10px;
    padding: 10px 30px;
    border-radius: 50px;
    background: #F5F6F8;
}
.profile .info {
    margin: 0 0 60px;
}
.profile .inner{
    margin: 0 auto;
    max-width: 950px;
    background: #fff;
    padding: 40px 40px 90px;
}
.profile .img {
    width: 264px;
}
.profile .txt {
    margin-left: 30px;
    width: calc(100% - 294px);
}
.profile .detail {
    margin: 0 0 60px;
    position: relative;
    border-radius: 6px;
    padding: 60px 30px 30px;
    border: 3px solid #50AEFF;
    background-image: url(../img/note.png);
}
.profile .detail::before {
    top: 0;
    left: 50%;
    content: "";
    height: 15px;
    width: 200px;
    position: absolute;
    background: #50AEFF;
    border-radius: 0 0 15px 15px;
    transform: translate(-50%, 0);
}
.profile .underline {
    margin-bottom: 5px;
    padding-bottom: 7px;
    display: inline-block;
    border-bottom: 1px solid #50AEFF;
}
.profile .name {
    margin-bottom: 10px;
    justify-content: space-between;
}
.profile .name .kanji {
    font-size: 16px;
    font-weight: bold;
    margin-left: 10px;
}
.profile .name .kana {
    font-size: 14px;
    margin-left: 10px;
}
.profile .name .pref {
    color: #fff;
    font-size: 10px;
    padding: 5px 10px;
    margin-left: 10px;
    border-radius: 50px;
    background: #50AEFF;
}
.profile .name .social a {
    display: inline-block;
}
.profile .badge {
    margin-bottom: 30px;
}
.profile .badge li {
    color: #fff;
    display: flex;
    padding: 6px 10px;
    margin-right: 15px;
    margin-bottom: 15px;
    align-items: center;
    border-radius: 10px;
    background: #50AEFF;
    width: calc(50% - 7.5px);
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.25);
}
.profile .badge li:nth-child(even) {
    margin-right: 0;
}
.profile .badge span {
    margin-left: 10px;
}
.profile .msg {
    font-weight: bold;
    margin-left: 10px;
}
.profile .item {
    padding: 0 30px;
    margin: 0 0 60px;
}
.profile .item p{
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    margin-bottom: 10px;
}
.profile .item span {
    color: #fff;
    padding: 10px;
    font-size: 14px;
    font-weight: 600;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 50px;
    display: inline-block;
}
.profile .yellow span {
    background: #FFC810;
}
.profile .blue span {
    background: #50AEFF;
}
.profile .item .btn {
    color: #004BB1;
    font-size: 14px;
    font-weight: bold;
    padding: 10px 30px;
    border-radius: 50px;
    display: inline-block;
    border: 1px solid #000000;
}
.profile a.contact {
    width: 100%;
    color: #fff;
    padding: 15px;
    margin: 0 auto;
    font-size: 20px;
    max-width: 440px;
    font-weight: bold;
    text-align: center;
    border-radius: 10px;
    background: #50AEFF;

    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
}
.profile a.contact span {
    margin-right: 30px;
}
.profile .txt a.contact {
    max-width: auto;
}
.profile .back {
    margin: 10px auto 0;
    max-width: 950px;
}
.profile .back a {
    font-size: 14px;
    color: #2F2F2F;
    font-weight: 700;
    text-decoration-line: underline;
}
.profile .back a:hover {
    text-decoration-line: none;
}

/*--Responsive--*/
@media screen and (max-width: 1299px){
}
@media screen and (max-width: 1024px){
}
@media screen and (max-width: 991px){
    .profile h2.ttl {
        padding: 0;
        width: 100%;
    }
    .profile .img {
        width: 100%;
        margin: 0 0 20px;
        text-align: center;
    }
    .profile .txt {
        width: 100%;
        margin-left: 0;
    }
}
@media screen and (max-width: 767px){
    .profile .inner {
        padding: 20px 20px 40px;
    }
    .profile .detail {
        padding: 40px 20px 20px;
    }
    .profile .badge li {
        width: 100%;
        margin-right: 0;
    }
    .profile .social {
        width: 100%;
        text-align: right;
    }
}
@media screen and (max-width: 481px){
    .profile .underline {
        width: 100%;
    }
    .profile .name .kanji {
        margin-left: 5px;
    }
    .profile .name .kana {
        font-size: 12px;
    }
}
@media screen and (max-width: 380px){
    .profile .name .kanji {
        margin-left: 3px;
    }
    .profile .name .kana {
        font-size: 10px;
    }
}

/*--------------------------------------------------------------
## Trainer Contact Page Styles
--------------------------------------------------------------*/
.contact h3.ttl {
    font-size: 32px;
}
.contact p {
    font-weight: 600;
}
.contact .inner {
    margin: 0 0 60px;
    text-align: center;
    padding: 40px 60px;
    border-radius: 10px;
    background: #F2F5FC;
}
.contact .flex {
    justify-content: center;
    gap: 10px;
    flex-wrap: nowrap;
}
.contact .item {
    width: calc(100% / 4);
}
.contact .item a.btn {
    color: #fff;
    padding: 10px 0;
    max-width: 270px;
    margin: 0 auto 10px;
    border-radius: 30px;
    background: #004BB1;

    display: flex;
    align-items: center;
    justify-content: center;
}
.contact .item a.tw {
    color: #fff;
    padding: 10px 0;
    max-width: 270px;
    margin: 0 auto 10px;
    border-radius: 30px;
    background: #1D9BF0;

    display: flex;
    align-items: center;
    justify-content: center;
}
.contact .item a.line {
    background: #12C90A;
}
.contact .item a.insta {
    background: #212427;
}
.contact .item a.tel span {
    display: block;
    margin-left: 10px;
}
.contact .item p.time {
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.contact .item p.time span {
    display: block;
    margin-left: 8px;
}
.contact .item p.note {
    margin: 0;
    font-size: 12px;
}
.contact .form {
    padding: 60px 0 120px;
}

/*--Responsive--*/
@media screen and (max-width: 1299px){
}
@media screen and (max-width: 1024px){
}
@media screen and (max-width: 991px){
    .contact .item {
        width: 100%;
        margin: 0 0 10px;
    }
}
@media screen and (max-width: 767px){
    .contact .inner {
        padding: 20px;
    }
    .contact .flex {
        flex-wrap: wrap;
    }
}
@media screen and (max-width: 481px){
}
@media screen and (max-width: 380px){
}

/*--------------------------------------------------------------
##  Contact Form Styles
--------------------------------------------------------------*/
.contact-form {
    margin: 0 auto;
    max-width: 600px;
}
.contact-form p {
    font-size: 16px;
    margin: 0 0 12px;
    color: #707F89;
    font-weight: bold;
}
.contact-form label.txt {
    font-size: 16px;
    margin: 0 0 12px;
    color: #707F89;
    font-weight: bold;

    display: flex;
    align-items: center;
}
.contact-form label span.required {
    font-size: 12px;
    color: #D71718;
    margin-left: 15px;
    padding: 3px 15px;
    border-radius: 6px;
    display: inline-block;
    border: 1px solid #D71718;
}
.contact-form input.txt {
    width: 100%;
    height: 50px;
    display: block;
    font-size: 16px;
    margin: 0 0 25px;
    padding: 10px 20px;
    border-radius: 6px;
    border: 1px solid #707070;
    font-family: "Noto Sans JP", sans-serif;
}
.contact-form input.error {
    margin: 0 0 5px;
    border: 1px solid #D71718;
    background-position: right;
    background-repeat: no-repeat;
    background-position: calc(100% - 20px);
    background-image: url(../img/error.png);
}
.contact-form span.error {
    display: none;
    color: #D71718;
    margin: 0 0 20px;
}
.contact-form input.error + span.error {
    display: block;
}
.contact-form input::placeholder {
    font-size: 16px;
    color: #CDD6DD;
    font-family: "Noto Sans JP", sans-serif;
}
.contact-form ul.category {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 15px;
}
.contact-form ul.category li {
    width: 40%;
    margin: 0 0 10px;
}
.contact-form label.checkbox {
    display: flex;
    cursor: pointer;
    align-items: center;
}
.contact-form input.checkbox {
    width: 0;
    margin: 0;
    opacity: 0;
}
.contact-form label.checkbox:hover > span.checkmark {
    background: #DDDDDD !important;
    border: solid 1px #333333;
}
.contact-form input.checkbox:focus + span.checkmark {
    background: #DDDDDD !important;
    border: solid 1px #333333;
}
.contact-form input.checkbox:checked + span.checkmark {
    border: solid 1px #333333;
    background: #FFFFFF;
}
.contact-form input.checkbox:checked + span.checkmark::before {
    top: 0;
    left: 0;
    opacity: 1;
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../img/check.svg);
}
.contact-form span.checkmark {
    position: relative;
    top: 0;
    left: 0;
    width: 15px;
    height: 15px;
    display: block;
    background: #FFFFFF;
    border: solid 1px #888888;
}
.contact-form span.label {
    display: block;
    font-size: 16px;
    color: #707F89;
    margin-left: 10px;
    width: fit-content;
}
.contact-form textarea {
    width: 100%;
    height: 10em;
    font-size: 16px;
    margin: 0 0 25px;
    padding: 10px 20px;
    border-radius: 6px;
    border: 1px solid #707070;
    font-family: "Noto Sans JP", sans-serif;
}
.contact-form textarea.error {
    margin: 0 0 5px;
    border: 1px solid #D71718;
    background-position: right;
    background-repeat: no-repeat;
    background-position: calc(100% - 20px);
    background-image: url(../img/error.png);
}
.contact-form textarea.error + span.error {
    display: block;
}
.contact-form textarea::placeholder {
    font-size: 16px;
    color: #CDD6DD;
    font-family: "Noto Sans JP", sans-serif;
}
.contact-form .privacy {
    display: flex;
    margin: 0 0 25px;
    justify-content: center;
}
.contact-form .privacy span.checkmark {
    width: 30px;
    height: 30px;
    border: solid 1px #CDD6DD;
}
.contact-form .privacy span.label {
    font-size: 12px;
    color: #3B4043;
}
.contact-form .privacy span.label a {
    color: #3B4043;
    text-decoration: underline;
}
.contact-form .privacy span.checkmark::before {
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 100%;
    opacity: 0.1;
    display: block;
    position: absolute;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../img/check.svg);
}
.contact-form .btn {
    width: 280px;
    margin: auto;
    border: none;
    padding: 10px;
    color: #FFF;
    transition: .3s;
    font-size: 16px;
    cursor: pointer;
    border-radius: 100px;
    background: #004BB1;
    box-sizing: border-box;
    font-family: "Noto Sans JP", sans-serif;
}
.contact-form .btn:hover {
    opacity: 0.6;
}

/*--Responsive--*/
@media screen and (max-width: 1299px){
}
@media screen and (max-width: 1024px){
}
@media screen and (max-width: 991px){
}
@media screen and (max-width: 767px){
    .contact-form ul.category li {
        width: 100%;
    }
    .contact-form .btn {
        height: 50px;
    }
}
@media screen and (max-width: 481px){
}
@media screen and (max-width: 380px){
}

/*--------------------------------------------------------------
## Pagenation Styles
--------------------------------------------------------------*/
.pagenation {
    display: flex;
    align-items: center;
}
.pagenation li.item {
    margin-right: 20px;
}
.pagenation a.link {
    width: 40px;
    height: 40px;
    display: flex;
    color: #98A6B5;
    align-items: center;
    justify-content: center;
}
.pagenation a.current {
    color: #004BB1;
    pointer-events: none;
}
.pagenation li:first-child a.link,
.pagenation li:last-child a.link {
    border-radius: 5px;
    border: 2px solid #F0F3F5;
}

/*--Responsive--*/
@media screen and (max-width: 1299px){
}
@media screen and (max-width: 1024px){
}
@media screen and (max-width: 991px){
}
@media screen and (max-width: 767px){
    .pagenation {
        justify-content: center;
    }
    .pagenation li.item {
        margin-right: 0;
    }
}
@media screen and (max-width: 481px){
}
@media screen and (max-width: 380px){
}

/*--------------------------------------------------------------
## Main & Sidebar Styles
--------------------------------------------------------------*/
.main {
    width: 800px;
}
.sidebar {
    width: 300px;
    margin-left: 40px;
}
.sidebar p {
    font-size: 12px;
}
.sidebar .inner {
    margin: 0 0 40px;
}
.sidebar .salon {
    padding: 20px;
    margin: 0 0 20px;
    border: 1px solid #707070;
}
.sidebar .shop {
    padding: 20px;
    margin: 0 0 20px;
    border: 1px solid #707070;
}
.sidebar .tag li {
    margin: 0 0 10px;
}
.sidebar .tag a {
    color: #3B4043;
    padding: 10px 20px;
    border-radius: 15px;
    display: inline-block;
    background: #F0F3F5;
    border: 1px solid #CDD6DD;
}
.sidebar .year {
    width: 200px;
}
.sidebar .year li {
    margin: 0 0 10px;
}
.sidebar .year a {
    display: block;
    color: #3B4043;
    background-position: right;
    background-repeat: no-repeat;
    background-image: url(../img/chevron.png);
}

/*--Responsive--*/
@media screen and (max-width: 1299px){
    .main {
        width: 100%;
    }
    .sidebar {
        margin: 60px 0 0;
    }
}
@media screen and (max-width: 1024px){
}
@media screen and (max-width: 991px){
}
@media screen and (max-width: 767px){
}
@media screen and (max-width: 481px){
}
@media screen and (max-width: 380px){
    .sidebar {
        width: 100%;
    }
}

/*--------------------------------------------------------------
## Archive Page Styles
--------------------------------------------------------------*/
.archive h3.ttl {
    font-size: 24px;
}
.archive h4.ttl {
    font-size: 20px;
    text-align: left;
}
.archive .sort {
    margin: 0 0 40px;
    justify-content: space-between;
}
.archive .search .selectbox {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.archive .search .selectbox::after {
    position: absolute;
    right: 15px;
    width: 13px;
    height: 8px;
    content: '';
    pointer-events: none;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../img/down.png);
}

.archive .search .selectbox select {
    width: 240px;
    height: 45px;
    font-size: 16px;
    cursor: pointer;
    appearance: none;
    color: #3B4043;
    padding: 12px 20px;
    background-color: #fff;
    border: 1px solid #DBDFE2;

}
.archive .search .search-form {
    width: 240px;
    height: 45px;
    margin-left: 20px;
    border: 1px solid #DBDFE2;
}
.archive .search .search-form label {
    width: 210px;
    height: 45px;
}
.archive .search .search-form input{
    font-weight: normal;
}
.archive .search .search-form input::placeholder{
    color: #CDD6DD;
    font-weight: normal;
}
.archive .search .search-form button {
    width: 30px;
}
.archive .search .search-form button::after {
    content: '';
    width: 15px;
    height: 13px;
    background-repeat: no-repeat;
    background-image: url(../img/ss-magnifying.png);
}
.archive .list .item {
    padding: 30px;
    display: flex;
    margin: 0 0 40px;
    position: relative;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
.archive .list .item .img {
    width: 300px;
    height: 180px;
}

.archive .list .item .img img {
    width: 100%;
    height: 100%;
}
.archive .list .item .txt {
    display: flex;
    position: relative;
    padding-left: 40px;
    align-items: center;
    width: calc(100% - 300px);
}
.archive .list .item .txt .tag {
    right: 0;
    bottom: 0;
    position: absolute;
}
.archive .list .item .txt .tag span {
    font-size: 14px;
    color: #98A6B5;
    font-weight: bold;
}

/*--Responsive--*/
@media screen and (max-width: 1299px){
}
@media screen and (max-width: 1024px){
}
@media screen and (max-width: 991px){
}
@media screen and (max-width: 767px){
    .archive .sort h3.ttl {
        width: 100%;
        text-align: left;
    }
    .archive .list .item {
        padding: 20px;
        flex-wrap: wrap;
        margin: 0 0 20px;
    }
    .archive .list .item .img {
        width: 100%;
        text-align: center;
    }
    .archive .list .item .txt {
        width: 100%;
        padding: 10px 0 0;
    }
    .archive .search .selectbox {
        margin-right: 20px;
        margin-bottom: 10px;
    }
    .archive .search .search-form {
        margin-left: 0;
    }
}
@media screen and (max-width: 481px){
}
@media screen and (max-width: 380px){
}

/*--------------------------------------------------------------
## Article Page Styles
--------------------------------------------------------------*/
.article .detail {
    margin: 0 0 40px;
}
.article .detail h3.ttl {
    font-size: 24px;
    text-align: left;
}
.article .detail h1.ttl {
    font-size: 24px;
    text-align: left;
}
.article .detail .time {
    margin: 0 0 10px;
}
.article .detail .time img {
    margin-right: 10px;
}
.article .detail .tag {
    margin: 0 0 40px;
}
.article .detail .img {
    margin: 0 0 20px;
}
.article .detail .img img {
    width: 100%;
}
.article .detail .txt {
    margin: 0 0 20px;
}
.article .banner {
    margin: 0 0 30px;
}
.article .banner .flex {
    justify-content: space-between;
}
.article .link a.btn {
    width: 500px;
    color: #fff;
    margin: 0 auto;
    display: block;
    line-height: 2;
    font-weight: bold;
    border-radius: 5px;
    padding: 10px 60px;
    text-align: center;
    margin-bottom: 20px;
    background: #1A9EFF;
}
.article .search {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 40px;
}
.article .search a.btn {
    width: 390px;
}
.article .search .search-form {
    width: 390px;
    height: 52px;
    border-radius: 5px;
}
.article　.search .search-form label {
    width: 350px;
    height: 52px;
}
.article .prev-next {
    padding: 20px 0;
    margin: 0 0 40px;
    border-top: 1px solid #888;
    border-bottom: 1px solid #888;

    display: flex;
    justify-content: space-between;
}
.article .prev-next a {
    display: block;
    font-weight: 500;
    color: #3B4043;
}
.article .recommend h3.ttl {
    margin: 0 0 20px;
}

/*--Responsive--*/
@media screen and (max-width: 1299px){
}
@media screen and (max-width: 1024px){
}
@media screen and (max-width: 991px){
}
@media screen and (max-width: 767px){
    .article .banner .flex {
        justify-content: center;
    }
    .article .link a.btn {
        width: 100%;
    }
    .article .search .search-form {
        width: 100%;
    }
}
@media screen and (max-width: 481px){
}
@media screen and (max-width: 380px){
}

/*--------------------------------------------------------------
## 20240309 added
--------------------------------------------------------------*/
@media screen and (max-width: 1299px){
    .explain .txt h2.pc{
        display: none;
    }
    .explain .txt h2.sp{
        display: block;
    }
}

/*--------------------------------------------------------------
## 20240313 added
--------------------------------------------------------------*/
.profile .yellow span{
    color: #2F2F2F;
}

.d-none {
    display: none !important;
}

/*--------------------------------------------------------------
## 20240521 added
--------------------------------------------------------------*/
.hero {
    height: auto;
}
.hero-background {
    height: auto;
    background-size: cover;
    background-position: center center;
    background-image: url(../img/main_img.jpg);
}
.hero-background::before {
    content: "";
    display: block;
    padding-top: 56.25%;
}
.search-content{
    padding: 80px 0 20px;
}
.search-content .search {
    margin: 0 auto;
    max-width: 800px;
    border-radius: 8px;
    padding: 40px 80px;
    background: #fff;
    box-shadow: 0 0 8px rgba(128, 128, 128, 0.4);
}
.search-content .search p.txt {
    font-weight: bold;
    text-align: center;
}
.search-content .search a.btn {
    width: 500px;
    color: #fff;
    margin: 0 auto;
    display: block;
    line-height: 2;
    font-weight: bold;
    border-radius: 5px;
    padding: 10px 60px;
    margin-bottom: 15px;
    background: #1A9EFF;
}
.search-content .search span {
    padding-left: 40px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center left;
    background-image: url(../img/s-maker.png);
}
.search-content .search .search-form {
    width: 500px;
    height: 45px;
    margin: 0 auto;
    display: flex;
    overflow: hidden;
    align-items: center;
    border: 1px solid #989898;
    justify-content: space-between;
}
.search-content .search .search-form label {
    width: 460px;
    height: 45px;
}
.search-content .search .search-form input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    font-size: 16px;
    color: #B7B7B7;
    font-weight: bold;
    padding: 5px 15px;
    text-align: center;
    box-sizing: border-box;
    font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
}
.search-content .search .search-form input::placeholder {
    font-size: 16px;
    color: #B7B7B7;
    font-weight: bold;
    font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
}
.search-content .search .search-form button {
    width: 40px;
    height: 45px;
    border: none;
    display: flex;
    cursor: pointer;
    background: #fff;
    align-items: center;
    justify-content: flex-start;
    background-color: transparent;
}
.search-content .search .search-form button::after {
    content: '';
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-image: url(../img/s-magnifying.png);
}
/*--Responsive--*/
@media screen and (max-width: 1299px){
}
@media screen and (max-width: 1024px){
}
@media screen and (max-width: 991px){
    .search-content {
        width: 100%;
        padding: 60px 15px 15px;
    }
}
@media screen and (max-width: 767px){
    .hero-background {
        background-image: url(../img/main_img_sp.jpg);
    }
    .hero-background::before {
        padding-top: 205%;
    }
    .search-content .search {
        padding: 25px 20px;
    }
    .search-content .search p.txt {
        font-size: 14px;
    }
    .search-content .search a.btn {
        width: 100%;
    }
    .search-content .search .search-form {
        width: 100%;
    }
    .search-content .search .search-form label {
        width: calc(100% - 40px);
    }
}
@media screen and (max-width: 481px){
}
@media screen and (max-width: 380px){
}

/*--------------------------------------------------------------
## 20240531 added
--------------------------------------------------------------*/
.article .banner .full_banner{
    margin-top: 10px;
    display: inline-block;
}
@media screen and (max-width: 991px) {
    .banner .flex .item{
        width: 100%;
        display: inline-block;
    }
    .banner .flex .item img{
        width: 100%;
    }
    .article .banner .full_banner{
        margin-top: 0;
    }
}