/* 共通 */
.list-group-item {
    border: none;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

a,
a:active,
a:visited,
a:hover{
    color: black;
    text-decoration: none;
}

:root {
    --letter_spacing_midashi: 0.6rem;
    --letter_spacing_normal: 0.2rem;
    --letter_spacing_normal_sp: 0.1rem;
    --letter_spacing_midashi_sp: 0.3rem;
    --font_size_small_text: 1rem;
    --font_size_text: 1.3rem;
    --font_size_text_sp: 3vw;
    --font_size_midashi: 2.5rem;
    --font_size_midashi2: 3rem;
    --font_size_midashi_sp: 6vw;
    --font_size_midashi2_sp: 2rem;
    --font_size_komidashi: 1.1rem;
    --font_size_komidashi_sp: 2.5vw;
    --site_color: #0472d2;
}

table th {
    color: #fff!important;
}

.logoarea h1 {
    display: block;
    text-indent: -9999px;
    position: absolute;
}

/* animation */
.fadeUp{
    animation-name:fadeUpAnimation;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity:0;
}

@keyframes fadeUpAnimation{
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeUpClass{
    opacity: 0;
}

.kasen {
    background: linear-gradient(transparent 60%, #c6e4fe 60%);
}
/* animation end */

/* PC */
@media (min-width: 768px) {

    .sp{
        display: none;
    }

    section {
        max-width: 1360px;
        margin: auto;
    }

    .top-header-slider .swiper-slide .top-mv {
        background-size: cover;
        background-position: center;
        height: 47.5rem;
        width: 100%;
        margin-top: 0.5rem;
    }

    .top_section, .contact_section {
        max-width: 1440px;
    }

    .logoarea img {
        width: 80%;
    }

    .nav-menu {
        justify-content: space-around;
    }

    .nav-menu a {
        color: #333;
        font-size: 1.2rem;
        letter-spacing: 0.4vw;
        font-weight: bold;
    }

    .sidemenu li {
        width: 75%;
    }

    .sidemenu .rightslide img,.sidemenu .tel img{
        transition: .5s;
    }

    .sidemenu .rightslide:hover img{
        margin-left: 0.3rem;
    }

    .sidemenu .tel:hover img{
        box-shadow: 2px 2px 5px #000;
    }

    .top_menu a img{
        transition: .5s;
    }

    .top_menu a:hover img{
        scale: 1.1;
    }

    .contact_section .bg_area {
        background-image: url(https://keiryomr-sinkai.com/wp-content/uploads/2023/11/CTA.png);
        background-size: cover;
        min-height: 35rem;
    }

    .midashi_box {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .midashi_box .midashi_area {
        color: #fff;
    }

    .midashi_box .midashi_area .komidashi,
    .midashi_box2 .midashi_area .komidashi,
    .midashi_box3 .midashi_area .komidashi{
        letter-spacing: var(--letter_spacing_normal);
        font-size: var(--font_size_komidashi);
    }

    .midashi_box2 .midashi_area .komidashi{
        color: var(--site_color);
    }

    .midashi_box3 {
        width: 100%;
        background-color: var(--site_color);
    }

    .midashi_box3 .midashi_area .komidashi{
        color: #fff;
    }

    .midashi_box .midashi_area .midashi_title,
    .midashi_box2 .midashi_area .midashi_title,
    .midashi_box3 .midashi_area .midashi_title{
        font-size: var(--font_size_midashi);
        letter-spacing: var(--letter_spacing_midashi);
        font-weight: bold;
    }

    .midashi_box3 .midashi_area .midashi_title{
        color: #fff;
    }
    

    .midashi_box .midashi_area .midashi_title img{
        width: 5%;
    }

    .contact_section .btn_area button{
        width: 100%;
        padding: 2.5rem;
        font-size: 1.3rem;
        background-color: #fff;
        border-radius: 3rem;
        border-color: #fff;
        font-weight: bold;
        letter-spacing: var(--letter_spacing_midashi);
        transition: .5s;
    }

    .contact_section .btn_area button:hover{
        color: #fff;
        border: solid 2px #fff;
        background-color: var(--site_color);
    }

    .post_area .btn_area button{
        width: 100%;
        padding: 2.5rem;
        font-size: 1.3rem;
        background-color: #fff;
        border-radius: 3rem;
        border-color: #000;
        font-weight: bold;
        letter-spacing: var(--letter_spacing_midashi);
        transition: .5s;
    }

    .post_area  .btn_area button:hover{
        color: #fff;
        border: solid 2px var(--site_color);
        background-color: var(--site_color);
    }

    .topmain_section .deep p {
        font-size: var(--font_size_text);
        line-height: 2rem;
        letter-spacing: var(--letter_spacing_normal);
    }

    .topmain_section .deep h2 {
        font-size: var(--font_size_midashi2);
        letter-spacing: var(--letter_spacing_midashi);
        font-weight: bold;
    }

    .fishing_box .title a, .news_box .title a{
        bottom: 0;
        right: 2rem;
        font-size: 0.8rem;
        letter-spacing: var(--letter_spacing_normal);
    }

    .fishing_box .title a:after, .news_box .title a:after{
        content: '';
        position: absolute;
        top: 50%;
        right: -1.5rem;
        width: 0.4rem;
        height: 0.4rem;
        border-top: 2px solid var(--site_color);
        border-left: 2px solid var(--site_color);
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        -o-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
        -o-transform: rotate(135deg);
        transform: rotate(135deg);
        transition: .5s;
    }

    .fishing_box .title a:hover:after, .news_box .title a:hover:after{
        right: -2rem;
    }

    .list h3, .list .honbun p{
        font-size: 1rem;
        letter-spacing: 0.1rem;
    }

    .list .img_box{
        overflow: hidden;
        height: 7rem;
        display: flex;
        align-items: center;
        width: 14rem;
    }

    .list .img_box img {
        min-height: 7rem;
        transition: .5s;
    }

    .list a:hover .img_box img{
        scale: 1.1;
    }

    .list .article-col{
        margin-left: 1rem;
    }

    .result article img {
        min-height: 13rem;
    }

    .result .entry-title {
        font-size: 1.1rem;
        letter-spacing: var(--letter_spacing_normal);
    }

    .result .entry-content p {
        font-size: 1.1rem;
    }

    .result article img{
        transition: .5s;
    }

    .result article:hover img{
        scale: 1.1;
    }

    .extra_charge p{
        font-size: var(--font_size_small_text);
    }

    .contact_area .wpcf7 label, .contact_area .wpcf7 label input{
        width: 100%;
        padding: 0.5rem;
        margin-top: 0.5rem;
    }

    .contact_area textarea {
        margin-top: 0.5rem;
    }

    .contact_area .require{
        padding: 0.25rem;
        background-color: var(--site_color);
        color: #fff;
        border-radius: 0.25rem;
    }

    .contact_area input[type='submit']{
        width: 100%;
        padding: 2.5rem;
        font-size: 1.3rem;
        background-color: #fff;
        border-radius: 3rem;
        border-color: #000;
        font-weight: bold;
        letter-spacing: var(--letter_spacing_midashi);
        transition: .5s;
    }

    .contact_area input[type='submit']:hover{
        color: #fff;
        border: solid 2px var(--site_color);
        background-color: var(--site_color);
    }

    .schedule_area #calendarTitle{
        font-size: 1.5rem;
    }

    footer .site-info{
        background-color: #345875;
    }

    footer .site-info p{
        font-size: 0.8rem;
        letter-spacing: var(--letter_spacing_normal);
    }
}





/* スマホ */
@media (max-width: 767px) {

    p {
        font-size: 3vw;
    }

    h1 {
        font-size: 5vw;
    }

    h2 {
        font-size: 6vw;
    }
    
    .pc {
        display: none;
    }

    .topmenu {
        height: 18vw;
        z-index: 99;
        background-color: #fff;
    }

    .topmenu .logo_area img {
        width: 30vw;
    }

    .topmenu .logo_area h1 {
        position: absolute;
        text-indent: -9999px;
        display: block;
    }

    .topmenu header {
        padding-top: 0.8rem;
    }

    .topmenu .main-navigation{
        width: auto;
    }

    .btn1{
        position: relative;/*ボタン内側の基点となるためrelativeを指定*/
        background:#ffffff00;
        cursor: pointer;
        width: 30px;
        height:30px;
        border: none;
        padding: 0;
    }
  
  /*ボタン内側*/
    .btn1 span{
        display: inline-block;
        transition: all .4s;
        position: absolute;
        left: 10%;
        height: 2px;
        border-radius: 2px;
        width: 80%;
    }
  
    .btn1 span:nth-of-type(1) {
        top:5px; 
        background: var(--site_color);
    }

    .btn1 span:nth-of-type(2) {
        top:14px;
        background: var(--site_color);
    }

    .btn1 span:nth-of-type(3) {
        top:24px;
        background: var(--site_color);
    }

    .btn1.active span:nth-of-type(1) {
        top: 8px;
        left: 10%;
        transform: translateY(6px) rotate(-45deg);
        width: 80%;
    }

    .btn1.active span:nth-of-type(2) {
        opacity: 0;
    }

    .btn1.active span:nth-of-type(3){
        top: 20px;
        left: 10%;
        transform: translateY(-6px) rotate(45deg);
        width: 80%;
    }

    .topmenu .sp_menu{
        position: fixed;
        width: 100%;
        background: #fffffff0;
        right: -100%;
        top: 0;
        margin-top: 18vw;
        transition: .5s;
        height: 100%;
    }

    .topmenu .sp_menu.active{
        right: 0%;
    }

    .topmenu .sp_menu {
        font-size: var(--font_size_text_sp);
        letter-spacing: var(--letter_spacing_sp);
    }

    .topmenu .sp_menu li{
        border-bottom: 1px solid #362a1f;
    }

    .maincontent {
        padding-top: 18vw;
    }

    section {
        max-width: 1360px;
        margin: auto;
    }

    .top-header-slider .swiper-slide .top-mv {
        background-size: cover;
        background-position: center;
        height: 43rem;
        width: 100%;
        margin-top: 0.5rem;
    }

    .top_section, .contact_section {
        max-width: 1440px;
        padding-top: 18vw;
    }

    .logoarea img {
        width: 80%;
    }

    .nav-menu {
        justify-content: space-around;
    }

    .nav-menu a {
        color: #333;
        font-size: 1.2rem;
        letter-spacing: 0.4vw;
        font-weight: bold;
    }

    .sidemenu li {
        width: 100%;
    }

    .sidemenu .tel:hover img{
        box-shadow: 2px 2px 5px #000;
    }

    .top_menu a img{
        transition: .5s;
    }

    .top_menu a:hover img{
        scale: 1.1;
    }

    .top_content_flex{
        flex-direction: column-reverse;
    }

    .contact_section .bg_area {
        background-image: url(https://keiryomr-sinkai.com/wp-content/uploads/2023/11/CTA.png);
        background-size: cover;
        min-height: 35rem;
    }

    .midashi_box {
        left: 10%;
        top: 50%;
        transform: translate(-5%, -50%);
    }

    .midashi_box .midashi_area {
        color: #fff;
    }

    .midashi_box .midashi_area .komidashi,
    .midashi_box2 .midashi_area .komidashi,
    .midashi_box3 .midashi_area .komidashi{
        letter-spacing: var(--letter_spacing_normal_sp);
        font-size: var(--font_size_komidashi_sp);
    }

    .midashi_box2 .midashi_area .komidashi{
        color: var(--site_color);
    }

    .midashi_box3 {
        width: 100%;
        background-color: var(--site_color);
        padding-top: 18vw;
    }

    .midashi_box3 .midashi_area .komidashi{
        color: #fff;
    }

    .midashi_box .midashi_area .midashi_title,
    .midashi_box2 .midashi_area .midashi_title,
    .midashi_box3 .midashi_area .midashi_title{
        font-size: var(--font_size_midashi_sp);
        letter-spacing: var(--letter_spacing_midashi_sp);
        font-weight: bold;
    }

    .midashi_box3 .midashi_area .midashi_title{
        color: #fff;
    }
    

    .midashi_box .midashi_area .midashi_title img{
        width: 5%;
    }

    .contact_section .btn_area button{
        width: 100%;
        padding: 1rem;
        font-size: var(--font_size_text_sp);
        background-color: #fff;
        border-radius: 3rem;
        border-color: #fff;
        font-weight: bold;
        letter-spacing: var(--letter_spacing_midashi_sp);
        transition: .5s;
    }

    .contact_section .btn_area button:hover{
        color: #fff;
        border: solid 2px #fff;
        background-color: var(--site_color);
    }

    .post_area .btn_area button{
        width: 100%;
        padding: 1rem;
        font-size: var(--font_size_text_sp);
        background-color: #fff;
        border-radius: 3rem;
        border-color: #000;
        font-weight: bold;
        letter-spacing: var(--letter_spacing_midashi_sp);
        transition: .5s;
    }

    .post_area  .btn_area button:hover{
        color: #fff;
        border: solid 2px var(--site_color);
        background-color: var(--site_color);
    }

    .topmain_section .deep p {
        font-size: var(--font_size_text_sp);
        line-height: 1.5rem;
        letter-spacing: var(--letter_spacing_normal_sp);
    }

    .topmain_section .deep h2 {
        font-size: var(--font_size_midashi_sp);
        letter-spacing: var(--letter_spacing_midashi_sp);
        font-weight: bold;
    }

    .fishing_box .title a, .news_box .title a{
        bottom: 0;
        right: 2rem;
        font-size: 0.8rem;
        letter-spacing: var(--letter_spacing_normal);
    }

    .fishing_box .title a:after, .news_box .title a:after{
        content: '';
        position: absolute;
        top: 50%;
        right: -1.5rem;
        width: 0.4rem;
        height: 0.4rem;
        border-top: 2px solid var(--site_color);
        border-left: 2px solid var(--site_color);
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        -o-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
        -o-transform: rotate(135deg);
        transform: rotate(135deg);
        transition: .5s;
    }

    .fishing_box .title a:hover:after, .news_box .title a:hover:after{
        right: -2rem;
    }

    .list h3, .list .honbun p{
        font-size: var(--font_size_text_sp);
        letter-spacing: var(--letter_spacing_normal_sp);
    }

    .list .img_box{
        overflow: hidden;
        height: 10rem;
        display: flex;
        align-items: center;
    }

    .list .img_box img {
        min-height: 7rem;
        transition: .5s;
    }

    .list a:hover .img_box img{
        scale: 1.1;
    }

    .result article img {
        min-height: 13rem;
    }

    .result .entry-title {
        font-size: 1.1rem;
        letter-spacing: var(--letter_spacing_normal);
    }

    .result .entry-content p {
        font-size: 1.1rem;
    }

    .result article img{
        transition: .5s;
    }

    .result article:hover img{
        scale: 1.1;
    }

    .extra_charge p{
        font-size: var(--font_size_small_text);
    }

    .contact_area .wpcf7 label, .contact_area .wpcf7 label input{
        width: 100%;
        padding: 0.5rem;
        margin-top: 0.5rem;
    }

    .contact_area textarea {
        margin-top: 0.5rem;
    }

    .contact_area .require{
        padding: 0.25rem;
        background-color: var(--site_color);
        color: #fff;
        border-radius: 0.25rem;
    }

    .contact_area input[type='submit']{
        width: 100%;
        padding: 1rem;
        font-size: var(--font_size_text_sp);
        background-color: #fff;
        border-radius: 3rem;
        border-color: #000;
        font-weight: bold;
        letter-spacing: var(--letter_spacing_midashi_sp);
        transition: .5s;
    }

    .contact_area input[type='submit']:hover{
        color: #fff;
        border: solid 2px var(--site_color);
        background-color: var(--site_color);
    }

    .schedule_area #calendarTitle{
        font-size: 1.5rem;
    }

    footer .site-info{
        background-color: #345875;
    }

    footer .site-info p{
        font-size: 0.7rem;
        letter-spacing: var(--letter_spacing_normal_sp);
    }

    #tablepress-2, .extra_charge, .extra_charge p {
        font-size: 3vw;
    }

    .traffic_area iframe {
        height: 60vw;
    }
}