@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #f3f4f5;
}

#page-top {
    position: fixed;
    bottom: 5%;
    right: 2%;
    width: 5%;
    height: 5vw;
    border-radius: 40px;
    z-index: 1000;
}

#page-top a {
    display: block;
    line-height: 6;
    font-size: 5%;
    color: #fff;
    text-align: center;
    text-decoration: none;
}
#page-top a:hover {
    width: 100%;
    height: 5vw;
    border-radius: 40px;
    color: #111;
    background-color: rgba(17, 50, 133, 0.5);
}
#page-top a img {
    display: block;
    width: 100%;
}

header {
    display: flex;
    width: 100%;
    position: fixed;
    background-color: rgba(148, 122, 109, 0.9);
    z-index: 10000;
}

h1 {
    width: 15%;
    height: 6vw;
}
h1 a img {
    width: 100%;
    margin-top: -20%;
} 
nav {
    width: 100%;
    height: 4vw;
    padding-top: 2%;
  }
  
nav ul {
    display: flex;
    width: 75%;
    margin-left: 20%;
    list-style-type: none;
}

nav ul li {
    width: 100%;
    text-align: center;
}

nav ul li a {
    position: relative;
    font-size: 1vw;
    font-weight: 600;
    line-height: 2.6;
    text-decoration: none;
    color:white;
    font-family: "Noto Sans JP", sans-serif;
}
  
/*ヘッダー動く下線部分*/
nav ul li a::after {
    position: absolute;
    left: 0;
    content: '';
    width: 100%;
    height: 2px;
    background: #AB3B3A;
    bottom: -1px;               /*アンダーラインがaタグの下端から現れる*/
    transform: scale(0, 1);     /*アンダーラインの縮尺比率。ホバー前はx方向に0*/
    transform-origin: left; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の左端*/
    transition: transform 0.3s; /*変形の時間*/
}
      
nav ul li a:hover::after {
    transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
}
.search-form-4 {
    display: flex;
    margin-top: -3%;
    margin-left: 7%;
    width: 85%;
    height: 3vw;
    align-items: center;
    overflow: hidden;
    border: 1px solid #777777;
    background-color: white;
    border-radius: 3px;
}

.search-form-4 input {
    padding: 2%;
    border: none;
    box-sizing: border-box;
    font-size: 1em;
    outline: none;
    font-family: "Noto Sans JP", sans-serif;
}

.search-form-4 input::placeholder {
    color: #777777;
}

.search-form-4 button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30%;
    padding: 1%;
    border: none;
    background-color: transparent;
    cursor: pointer;
}

.search-form-4 button::before {
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z' fill='%23777777'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    content: '';
}

/* スライドショー */
.img-frame{
    position: relative;
    width: 70%;
    height: 300px;
    overflow: hidden;
    margin: 0 auto;
}

.img-frame{
    width: 100%;
    height: 35vw;
}
.img-01, .img-02, .img-03{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: -25% 30%;
    background-repeat: no-repeat;
}
.img-01{
    background-image: url(../images/jinjya-1.jpg);
    animation: slide-animation-01 24s infinite;
 }
 .img-02{
    background-image: url(../images/jinjya-2.webp);
    animation: slide-animation-02 24s infinite;
}
.img-03{
    background-image: url(../images/jinjya-3.jpg);
    animation: slide-animation-03 24s infinite;
}
 
@keyframes slide-animation-01 {
     0% {opacity: 1; transform: scale(1.0);}
   30% {opacity: 1;}
   40% {opacity: 0; transform: scale(1.15);}
   90% {opacity: 0}
 100% {opacity: 1; transform: scale(1.0);}
}
@keyframes slide-animation-02 {
     0% {opacity: 0;}
   30% {opacity: 0; transform: scale(1.1);}
   40% {opacity: 1;}
   60% {opacity: 1;}
   70% {opacity: 0; transform: scale(1.0);}
 100% {opacity: 0;}
}
@keyframes slide-animation-03 {
     0% {opacity: 0;}
   60% {opacity: 0;  transform: scale(1.0);}
   70% {opacity: 1;}
   90% {opacity: 1;}
 100% {opacity: 0; transform: scale(1.1);}
}

/* スライドショー */


/* 波 */
.PageHeader {
    position: relative;
}
.PageHeader_wave {
    position: absolute;
    top: 45%;
    width: 100%;
}
/* 波 */


/* 特徴 */
.tokutyou {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
}
.tokutyou h2 {
    margin-top: 5%;
    margin-bottom: 2%;
    font-size: 1.8vw;
    color: #333;
    font-family: "Nanum Myeongjo", serif;
    text-align: center;
}
.tokutyou ul {
    width: 90%;
    display: flex;
    list-style-type: none;
    margin-left: auto;
    margin-right: auto;
}
.tokutyou ul li {
    width: 70%;
    padding: 1%;
}
.tokutyou ul li img {
    display: block;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}
.tokutyou ul li p {
    text-align: center;
    font-size: 1vw;
    color: #333;
    font-family: "Noto Sans JP", sans-serif;
}
.tokutyou ul li p span {
    display: block;
    margin-top: 5%;
    margin-bottom: 3%;
    font-size: 1.1vw;
    color: #333;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
}
/* 特徴 */

/* スクロール記述 */
.scroll_left {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(-30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_left.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}
.scroll_right {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_right.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}
.scroll_up {
    transition: 0.8s ease-in-out;
    transform: translateY(30px);
    opacity: 0;
  }
  .scroll_up.on {
    transform: translateY(0);
    opacity: 1.0;
  }

@keyframes sdl06 {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}
/* スクロール記述 */

/*  こんな方に */
.konna {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
}
.konna h2 {
    font-size: 1.8vw;
    font-weight: 600;
    color: #333;
    text-align: center;
    font-family: "Nanum Myeongjo", serif;
}
.flex {
    display: flex;
}
.flex-in {
    display: flex;
}
.konna h3 {
    white-space: pre-wrap;
    font-size: 1.3vw;
    color: #222;
    text-align: center;
    margin-bottom: 5%;
    font-family: "Noto Sans JP", sans-serif;
}
.konna-in1  {
    width: 80%;
    margin: 3%;
    padding: 2%;
    background-color:#FAD689;
    border-radius: 10px;
}
.konna-in1 img {
    width: 100%;
    height: 10vw;
}
.konna-in1 p {
    text-align: center;
    font-size: 1vw;
    color: #333;
    font-weight: 600;
    margin-top: 5%;
    font-family: "Noto Sans JP", sans-serif;
}
.konna-in2  {
    width: 80%;
    margin: 3% 3% 3% 0%;
    padding: 2%;
    background-color:#A8D8B9;
    border-radius: 10px;
}
.konna-in2 img {
    width: 100%;
    height: 10vw;
}
.konna-in2 p {
    text-align: center;
    font-size: 1vw;
    color: #333;
    font-weight: 600;
    margin-top: 5%;
    font-family: "Noto Sans JP", sans-serif;
}
.konna-in3 {
    width: 80%;
    margin: 0% 3% 3% 3%;
    padding: 2%;
    background-color:#FEDFE1;
    border-radius: 10px;
}
.konna-in3 img {
    width: 100%;
    height: 10vw;
}
.konna-in3 p {
    text-align: center;
    font-size: 1vw;
    color: #333;
    font-weight: 600;
    margin-top: 5%;
    font-family: "Noto Sans JP", sans-serif;
}
.konna-in4  {
    width: 80%;
    margin: 0% 3% 3% 0%;
    padding: 2%;
    background-color:#B28FCE;
    border-radius: 10px;
}
.konna-in4 img {
    width: 100%;
    height: 10vw;
}
.konna-in4 p {
    text-align: center;
    font-size: 1vw;
    color: #333;
    font-weight: 600;
    margin-top: 5%;
    font-family: "Noto Sans JP", sans-serif;
}
/*  こんな方に */


/* ふらっと */
.furato {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
}
.furato h2 {
    text-align: center;
    font-size: 1.8vw;
    font-weight: 600;
    color: #333;
    margin-bottom: 3%;
    font-family: "Nanum Myeongjo", serif;
}
.furato p {
    text-align: center;
    font-size: 1.2vw;
    color: #333;
    font-family: "Noto Sans JP", sans-serif;
}
.furato-riyu {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
    padding-top: 1%;
    padding-bottom: 3%;
    background-color: #fff;
}
.furato-riyu h3 {
    text-align: center;
    font-size: 1.5vw;
    color: #333;
    margin-top: 5%;
    margin-left: 10%;
    margin-bottom: 3%;
    font-family: "Noto Sans JP", sans-serif;
}
.furato-riyu .flex-in img {
    margin-top: -5%;
    margin-left: 3%;
    width: 30%;
}
.furato-riyu .flex-in .p-1 {
    width: 60%;
    font-size: 1.2vw;
    color: #333;
    margin-left: 3%;
    font-family: "Noto Sans JP", sans-serif;
}
.furato-riyu .flex-in .p-1 span {
    color: #AB3B3A;
    font-weight: 700;
}
.otoku {
    width: 30%;
    margin-top: 5%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 3%;
    border: 2px solid rgb(60, 198, 129);
    border-radius: 5px;
}
.otoku h4 {
    text-align: center;
    font-size: 1.3vw;
    color: #333;
    background-color: rgb(60, 198, 129);
}
.otoku h4 img {
    width: 5%;
}
.otoku .icon-1 {
    display: block;
    width: 25%;
    margin-top: 5%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5%;
}
.otoku .icon {
    display: block;
    width: 35%;
    margin-top: 5%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5%;
}
.otoku .otoku-p {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
    font-size: 1.1vw;
    color: #333;
    text-align: center;
    font-family: "Noto Sans JP", sans-serif;
}
.otoku .otoku-p span {
    color: #AB3B3A;
    font-weight: 700;
}
/* ふらっと */

/* ネットご案内 */
.annai {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
}
.annai h2 {
    text-align: center;
    font-size: 1.8vw;
    font-weight: 600;
    color: #333;
    font-family: "Nanum Myeongjo", serif;
    margin-bottom: 3%;
}
.flex .annai-in {
    width: 20%;
    height: 18vw;
    margin-left: auto;
    border: 4px solid rgba(250, 248, 137, 0.8);
    background-color: #fff;
    border-radius: 9999px;
}
.flex .annai-in:nth-of-type(2) {
    width: 20%;
    height: 18vw;
    border: 4px solid rgba(137, 229, 250, 0.5);
    border-radius: 9999px;
}
.flex .annai-in:nth-of-type(3) {
    width: 20%;
    height: 18vw;
    border: 4px solid rgba(154, 250, 137, 0.5);
    border-radius: 9999px;
}
.flex .annai-in:nth-of-type(4) {
    width: 20%;
    height: 18vw;
    margin-right: auto;
    border: 4px solid rgba(250, 137, 220, 0.5);
    border-radius: 9999px;
}
.flex .annai-in img {
    display: block;
    width: 40%;
    margin-top: 20%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5%;
}
.flex .annai-in .img-4 {
    display: block;
    width: 35%;
    margin-top: 13%;
    margin-left: auto;
    margin-right: auto;
}
.flex .annai-in p {
    text-align: center;
    font-size: 1.1vw;
    color: #333;
}
.flex .annai-in p span {
    color: #777777;
    font-size: 0.9vw;
}
/* ネットご案内 */



/* コツ */
.master-kotu h2 {
    text-align: center;
    font-size: 1.8vw;
    font-weight: 600;
    color: #333;
    font-family: "Nanum Myeongjo", serif;
    margin-top: 8%;
}
.master-kotu p {
    font-size: 2.5vw;
    font-weight: 600;
    color: #113285;
}
.master-kotu p:nth-of-type(2) {
    font-size: 2.5vw;
    font-weight: 600;
    color:#AB3B3A;
}
.all-kotu {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
    background-color: #fff;
    border-left: 3px solid #000;
    border-image: linear-gradient(to bottom, #7f7fff,#c4ff89, #ffff8e, #ffbf7f, #ff8989) 1;
}

/* step1 */
.all-kotu .kotu-step1 h3 {
    text-indent: 1em;
    font-size: 2vw;
    color: #fff;
    background-color: #7f7fff;
    clip-path: polygon(100% 0%, 96% 51%, 100% 100%, 0 100%, 0% 50%, 0 0);
}
.kotu-step1 ul {
    width: 80%;
    margin-top: 5%;
    margin-left: 6%;
    position: relative;
}
.kotu-step1 .ul-img {
    display: block;
    width: 30%;
    height: 10vw;
}
.kotu-step1 .ul-img2 {
    display: block;
    width: 100%;
    height: 10vw;
}
.kotu-step1 .flex li:nth-of-type(2) {
    margin-left: 10%;

}
.kotu-step1 ul li {
    width: 80%;
    font-size: 1.3vw;
    font-weight: 600;
    color: #333;
    margin-bottom: 5%;
}
.kotu-step1 ul li p {
    margin-top: 1%;
    font-size: 1vw;
    font-weight: 500;
    color: #333;
}
.kotu-step1 ul .position {
    position: absolute;
    top: 73%;
    left: 45%;
    text-indent: 1em;
    list-style-type: none;
    text-align: left;
} 
.kotu-step1 ul li img {
    display: block;
    width: 50%;
    margin-top: 2%;
}
/* step1 */

/* step2 */
.all-kotu .kotu-step2 h3 {
    text-indent: 1em;
    font-size: 2vw;
    color: #fff;
    background-color: #edc54c;
    clip-path: polygon(100% 0%, 96% 51%, 100% 100%, 0 100%, 0% 50%, 0 0);
}
.kotu-step2 ul {
    width: 80%;
    margin-top: 5%;
    margin-left: 6%;
    position: relative;
}
.kotu-step2 ul .position2 {
    position: absolute;
    top: 5%;
    left: 60%;
    width: 35%;
    text-indent: 1em;
    list-style-type: none;
}
.position2 .p-img {
    display: block;
    width: 100%;
   
}
.kotu-step2 ul li {
    width: 80%;
    font-size: 1.3vw;
    font-weight: 600;
    color: #333;
    margin-bottom: 5%;
}
.kotu-step2 ul li p {
    margin-top: 1%;
    font-size: 1vw;
    font-weight: 500;
    color: #333;
}
.kotu-step2 ul li img {
    display: block;
    width: 40%;
    margin-top: 2%;
}
.kotu-step2 ul .position3 {
    position: absolute;
    top: 75%;
    left: 43%;
    width: 35%;
    list-style-type: none;
}
.kotu-step2 ul .position4 {
    position: absolute;
    top: 65%;
    left: 70%;
    width: 45%;
    list-style-type: none;
}
.position4 .p-img {
    display: block;
    width: 50%;
    margin-left: 25%;
}
/* step2 */

/* step3 */
.all-kotu .kotu-step3 h3 {
    text-indent: 1em;
    font-size: 2vw;
    color: #fff;
    background-color: #ffa244;
    clip-path: polygon(100% 0%, 96% 51%, 100% 100%, 0 100%, 0% 50%, 0 0);
}
.kotu-step3 ul {
    width: 80%;
    margin-top: 5%;
    margin-left: 6%;
    position: relative;
}
.kotu-step3 ul img {
    display: block;
    width: 30%;
}
.kotu-step3 ul li {
    width: 100%;
    font-size: 1.3vw;
    font-weight: 600;
    color: #333;
    margin-bottom: 5%;
}
.kotu-step3 ul li p {
    margin-top: 1%;
    font-size: 1vw;
    font-weight: 500;
    color: #333;
}
/* step3 */

/* step4 */
.all-kotu .kotu-step4 h3 {
    text-indent: 1em;
    font-size: 2vw;
    color: #fff;
    background-color: #ff8c44;
    clip-path: polygon(100% 0%, 96% 51%, 100% 100%, 0 100%, 0% 50%, 0 0);
}
.kotu-step4 ul {
    width: 80%;
    margin-top: 5%;
    margin-left: 6%;
    position: relative;
}
.kotu-step4 p {
    width: 70%;
    margin-top: 5%;
    margin-left: 2%;
    font-size: 1.1vw;
    font-weight: 500;
    color: #333;
}
.kotu-step4 img {
    display: block;
    width: 20%;
    margin-top: 2%;
    margin-bottom: 2%;
}
/* step4 */

/* step5 */
.all-kotu .kotu-step5 h3 {
    text-indent: 1em;
    font-size: 2vw;
    color: #fff;
    background-color: #fd7860;
    clip-path: polygon(100% 0%, 96% 51%, 100% 100%, 0 100%, 0% 50%, 0 0);
}
.kotu-step5 ul {
    width: 80%;
    margin-top: 5%;
    margin-left: 6%;
    position: relative;
}
.kotu-step5 ul li {
    width: 100%;
    font-size: 1.3vw;
    font-weight: 600;
    color: #333;
    margin-bottom: 5%;
}
.kotu-step5 ul li p {
    margin-top: 1%;
    font-size: 1vw;
    font-weight: 500;
    color: #333;
}
.kotu-step5 ul li img {
    display: block;
    width: 60%;
    margin-top: 10%;
    margin-left: 10%;
}
.kotu-step5 .box img {
    display: block;
    width: 50%;
    margin-top: 10%;
    margin-left: 20%;
}
.kotu-step5 .box p {
    margin-top: 1%;
    font-size: 1vw;
    font-weight: 500;
    color: #333;
    margin-right: 5%;
}
/* step5 */
/* コツ */


/* 質問 */ 
.q-a {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
    margin-bottom: 5%;
}
.q-a h2 {
    text-align: center;
    font-size: 1.8vw;
    font-weight: 600;
    color: #333;
    margin-bottom: 3%;
    font-family: "Nanum Myeongjo", serif;
}
.q-a ul {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    list-style-type: none;
}
.q-a ul li {
    width: 100%;
    margin-top: 5%;
    border-bottom: 1px dashed silver;
}
.q-a ul li h3 {
    display: flex;
    font-size: 1.5vw;
    color: #333;
    margin-bottom: 2%;
} 
.q-a ul li h3 span {
    display: block;
    padding: 1%;
    width: 3%;
    margin-top: -1%;
    font-size: 1.4vw;
    color: #fff;
    text-align: center;
    border-radius: 9999px;
    background-color: skyblue;
    font-family: "Noto Sans JP", sans-serif;
}
.q-a ul li .answer {
    display: flex;
    font-size: 1.2vw;
    color: #333;
    padding-bottom: 2%;
}
.q-a ul li .answer span {
    display: block;
    padding: 1%;
    width: 3.5%;
    height: 2vw;
    margin-top: -1%;
    font-size: 1.4vw;
    font-weight: 700;
    color: #fff;
    text-align: center;
    border-radius: 9999px;
    background-color:pink;
    font-family: "Noto Sans JP", sans-serif;
} 
/* 質問 */

/* フッター */
footer {
    background-color: rgba(148, 122, 109, 0.1);
}
.all-inc {
    display: flex;
    border-top: 3px solid #AB3B3A;
}
.inc-in {
    width: 25%;
    margin-top: 3%;
    margin-bottom: 3%;
    margin-left: auto;
    margin-right: auto;
    border-right: 1px solid silver;
}
.inc-in:nth-of-type(1) {
    border-right:rgba(0, 0, 0, 0) ;
}
.inc-in:nth-of-type(5) {
    border-right:rgba(0, 0, 0, 0) ;
}
.inc-in img {
    display: block;
    width: 90%;
    margin-top: -10%;
}
.inc-in h4 {
    text-align: left;
    font-size: 1.4vw;
    color: #333;
    font-weight: 700;
    margin-left: 5%;
    font-family: "Noto Sans JP", sans-serif;
}
.inc-in ul {
    width: 70%;
    margin-left: 5%;
    list-style-type: none;
}
.inc-in ul li {
    width: 100%;
}
.inc-in ul li a {
    display: block;
    text-align: left;
    font-size: 1.1vw;
    line-height: 2;
    text-decoration: none;
    color: #333;
    font-family: "Noto Sans JP", sans-serif;
}
.inc-in ul li a:hover {
    text-decoration: underline;
}
.inc-in ul .otoiawase {
    margin: 5%;
    padding: 2%;
    background-color: #113285;
    border-radius: 10px;
}
.inc-in ul .otoiawase a {
    font-size: 1.2vw;
    text-align: center;
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
}
.inc-in ul .kaiin {
    margin: 5%;
    padding: 2%;
    background-color: #113285;
    border-radius: 10px;
}
.inc-in ul .kaiin a {
    font-size: 1.2vw;
    text-align: center;
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
}

.copy {
    padding: 1%;
    background-color: #AB3B3A;
}
.copy p {
    text-align: center;
    color: #fff;
}
/* フッター */