@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    height: 200vw;
    background-color: #f6f6f6;
}

@font-face {
    font-family: ZenMaruGothic-Light;
    src: url(../font/Zen_Maru_Gothic/ZenMaruGothic-Light.ttf);
}

@font-face {
    font-family: ZenMaruGothic-Regular;
    src: url(../font/Zen_Maru_Gothic/ZenMaruGothic-Regular.ttf);
}

@font-face {
    font-family: ZenMaruGothic-Medium;
    src: url(../font/Zen_Maru_Gothic/ZenMaruGothic-Medium.ttf);
}

header {
    display: flex;
    height: 10vw;
    padding: 1%;
    z-index: 9999;
}

.header_left h1 img {
    vertical-align: bottom;
    width: 100%;
}

.parent {
    margin-right: 3.6%;
    gap: 15px;
    justify-content: flex-end;
}

.parent a {
    display: block;
    padding: 1% 3%;
    font-size: 1.3vw;
    border-radius: 9999px;
    text-decoration: none;
    font-family: ZenMaruGothic-Medium;
    color: #fff;
    background-color: #a1be95;
}

.child {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}
.parent a:nth-of-type(2) {
    background-color: #92aac7;
}
.fa-calendar-days {
    font-size: 2.4vw;
}
.calendar_text span {
    font-size: 1vw;
}
.fa-phone {
    font-size: 1.4vw;
}
.tel_text {
    line-height: 2;
    font-size: 1.8vw;
}

.flex_1 {
    flex: 1;
}
.flex_3 {
    flex: 3;
}

.header_right .parent {
    display: flex;
}
.header_right .child {
    display: flex;
}

/* ナビゲーション */
.main_nav {
    width: 70%;
    margin-left: auto;
    margin-top: 2%;
}

.main_nav .main_ul {
    display: flex;
    list-style-type: none;
}

.main_li {
width: 20%;/* 60%(100%)のなかで5等分 */
}

.main_ul .main_li .main_a {
    display: block;
    text-align: center;
    line-height: 2.4;
    text-decoration: none;
    font-size: 1.2vw;
    color: #757575;
    font-family: ZenMaruGothic-Medium;
}
.main_ul .main_li .main_a:hover {
    /* color: #ed5752; */
    color: #92aac7;
    /* color: #a1be95; */
}

/*  */
.sub_ul {
    position: absolute;
    width: 150%;
    list-style-type: none;
    opacity: 0;
    transition: 1s;
    border-radius: 10px;
    background-color: #f6f6f6;
    z-index: 9999;
}

.sub_ul .sub_li {
    padding: 8%;
}

.sub_ul .sub_li a {
    display: block;
    text-align: center;
    line-height: 1.4;
    text-decoration: none;
    font-size: 1vw;
    color: #757575;
    /* color: #333132; */
    font-family: ZenMaruGothic-Medium;
}
.sub_ul .sub_li a:hover {
    color: #92aac7;
}

.pull {
    position: relative;
    overflow: hidden;
}

.pull:hover {
    overflow: visible;
}

.pull:hover .sub_ul {
   opacity: 1;
}

/* メインビジュアル */
.main_visual {
    position: relative;
    width: 94%;
    margin-left: auto;
    margin-right: auto;

    /* background-color: wheat; */
}
.main_visual img {
    width: 100%;
    vertical-align: bottom;
    border-radius: 20px;
}

.img_top_item {
    position: absolute;
    text-align: center;
    padding: 2%;
    width: 10%;
    height: 16%;
    top: 0;
    right: 0;
    border-radius: 0px 20px 0px 20px;

    color: #fff;
    background-color: #ed5752;
}

.img_top_text {
    letter-spacing: 0.25rem;
    font-size: 1.6vw;
    font-family: ZenMaruGothic-Medium;
}
.img_top_text span {
    font-size: 1.2vw;
    font-family: ZenMaruGothic-Medium;
}
.fa-train-subway {
    margin-bottom: 10%;
    font-size: 3vw;
}

.img_left_item {
    position: absolute;
    top: 10%;
    left: 3.5%;
    padding: 1.5%;

    /* background-color: #f6f6f6; */
}
.img_left_item h2 {
    letter-spacing: 0.5rem;
    font-size: 3vw;
    font-family: ZenMaruGothic-Light;
    /* font-family: ZenMaruGothic-Regular; */

    color: #92aac7;
}
.img_left_item_text {
    line-height: 2;
    letter-spacing: 0.35rem;
    margin-top: 5%;
    font-size: 1.2vw;
    font-family: ZenMaruGothic-Light;
    /* font-family: ZenMaruGothic-Regular; */

    color: #fff;
}

.img_left_bottom {
    position: absolute;
    bottom: 3%;
    left: 5%;
    display: flex;
    text-align: center;
    
    width: 40%;
    gap: 10px;
    justify-content: center;

    /* background-color: wheat; */
}
.bottom_item {
    flex: 1;
    padding: 3% 0%;
    line-height: 1.5;
    border-radius: 10px;
    font-size: 1.2vw;
    letter-spacing: 0.1rem;
    color: #92aac7;
    background-color: #fff;
    font-family: ZenMaruGothic-Regular;
}
.bottom_item span {
    font-weight: bold;
    color: #92aac7;
}
.bottom_item p {
    margin-top: 5%;
}
.fa-clipboard, .fa-clock, .fa-user-doctor {
    font-size: 2.8vw;
}

/* 診療時間 */
.img_table {
    position: absolute;
    bottom: 3%;
    right: 3.5%;
    width: 40%;
}
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    white-space: nowrap;
    border-radius: 1.5vw;
    background-color: #fff;
    overflow: hidden;
}
th, td {
    font-size: 1.2vw;
    line-height: 2;
    color: #757575;
    font-family: ZenMaruGothic-Regular;
}
tr:first-of-type th, tr:first-of-type td {
    line-height: 2;
    font-size: 1.2vw;
    color: #fff;
    background-color: #a1be95;
    font-family: ZenMaruGothic-Regular;
}
th {
    text-align: center;
}
td {
    text-align: center;
    padding: 2%;
}

.back_c {
    position: absolute;
    width: 100%;
    height: 180vh;
    /* border-radius: 50% 50% 0% 0%; */
    top: 70%;
    z-index: -1;
    background-color: #f6f6f6;
}
/* セクション２ */
.res_ {
    width: 94%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4%;
}
.company {
    text-align: center;
    letter-spacing: 0.25rem;
    font-size: 1.4vw;
    color: #757575;
    font-family: ZenMaruGothic-Regular;
}
.company span {
    padding-bottom: 0.5%;
    background-image: linear-gradient(to right, #757575, #757575 2px, transparent 2px);
    background-size: 7px 2px;
    background-position: left bottom;
    background-repeat: repeat-x;
}
.company_sub {
    margin-top: 1.5%;
    text-align: center;
    letter-spacing: 0.25rem;
    line-height: 1.7;
    font-size: 1.8vw;
    color: #757575;
    /* font-family: ZenMaruGothic-Regular; */
    font-family: ZenMaruGothic-Medium;
}

.res_btn {
    display: flex;
    width: 24%;
    padding: 1%;
    gap: 10%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3%;
    justify-content: center;
    align-items: center;
    border-radius: 9999px;
    box-shadow: 0 5px 0 #ca1c30;
    cursor: pointer;
    color: #fff;
    background-color: #ed5752;
}
.res_btn:hover {
    box-shadow: none;
    transform: translateY(5px);
}

.res_btn .btn_cal .fa-calendar-days {
    font-size: 3vw;
}
.res_btn a {
    text-decoration: none;
    color: #fff;
    font-size: 1.8vw;
    letter-spacing: 0.15rem;
    font-family: ZenMaruGothic-Medium;
}
.res_btn a span {
    font-size: 1.4vw;
}
.res_btn_20 {
    width: 24%;
    margin-top: 2%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.res_btn_20 a {
    font-size: 1.4vw;
    color: #757575;
    font-family: ZenMaruGothic-Medium;
}

/* セクション3 */
.aaaaa {
    position: relative;
    height: 20vw;
}
.aaa {
    height: 55vw;
    position: absolute;
    top: 75%;
    background-color: #92aac7;
}
.bbb {
    margin-top: 8%;
    /* position: absolute; */
    transform: scaleY(-1);
}
.section_point {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.section_point h3 {
    width: 35%;
}

.point_ttl {
    font-size: 1.6vw;
    letter-spacing: 0.15rem;
    color: #fff;
    font-family: ZenMaruGothic-Medium;
}

.point_ttl2 {
    position: relative;
    margin-top: 3.5%;
    padding: 2.7%;
    /* border: 2px solid; */
    background-color: #fff;
    border-radius: 10px;
    color: #757575;
    letter-spacing: 0.15rem;
    font-size: 2vw;
    text-align: center;
    font-family: ZenMaruGothic-Medium;
}
.point_ttl2::before {
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 100%;
    height: 100%;
    border-right: 4px dotted;
    border-bottom: 4px dotted;
    color: #fff;
    /* transition: .3s; */
    content: '';
}
.point_ttl2 span {
    color: #92aac7;
}
/* かーどれいあうと */
.card_flex {
    display: flex;
    justify-content: space-between;
}
.card {
    width: 32.5%;
    margin-top: 4%;
    border-radius: 10px 10px 10px 10px;
    color: #757575;
    background-color: #fff;
}
.card_header {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.card_title {
    padding: 0 1rem 0;
    font-size: 1.3vw;
    letter-spacing: 0.15rem;
    order: 1;
    font-family: ZenMaruGothic-Medium;
}
.card_title .marker {
    background: linear-gradient(transparent 60%, #92aac78f 60%);
}
.card_title .kuuhaku {
    opacity: 0;
}
.card_thu {
    margin: 0;
    order: 0;
}
.card_image {
    width: 100%;
    height: 90%;
    border-radius: 10px 10px 0px 0px;
    vertical-align: bottom;
}
.card_body {
    padding: 1rem;
}
.card_text {
    text-align: justify;
    line-height: 2;
    letter-spacing: 0.1rem;
    font-size: 1vw;
    font-family: ZenMaruGothic-Regular;
}
.card_text_sub {
    margin-top: 2%;
    text-align: justify;
    line-height: 2;
    letter-spacing: 0.1rem;
    font-size: 0.9vw;
    font-family: ZenMaruGothic-Regular;
}

/* セクション4 */
.section_symptoms {
    width: 80%;
    margin-top: 60%;
    margin-left: auto;
    margin-right: auto;
}

.symptoms_ttl_flex {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    /* background-color: palegreen; */
}

.symptoms_ttl {
    font-size: 1.8vw;
    letter-spacing: 0.25rem;
    line-height: 2;
    color: #757575;
    font-family: ZenMaruGothic-Medium;
}
.sym_ttl {
    font-size: 2.4vw;
    color: #92aac7;
}
.symptoms_ttl_sub {
    font-size: 1.1vw;
    letter-spacing: 0.25rem;
    line-height: 1.7;
    color: #757575;
    /* font-family: ZenMaruGothic-Regular; */
    font-family: ZenMaruGothic-Light;
}
/* 症状一覧 */
.sym_flex {
    display: flex;
    gap: 1.5%;
    margin-top: 8%;
}

.sym_flex .sym_flex_li {
    flex: 1;
    padding: 2.3%;
    border-radius: 10px;
    border: 3px solid #a9a9a946;
    background-color: #fff;
}

.sym_flex_ttl {
    font-size: 1.4vw;
    font-family: ZenMaruGothic-Regular;
}
.sft {
    color: #ed5752;
}
.sft2 {
    color: #92aac7;
}
.sft3 {
    color: #a1be95;
}
.fa-heart, .fa-square-person-confined, .fa-people-arrows {
    margin-right: 2%;
    font-size: 1.4vw;
}
.fa-heart {
    color: #ed5752;
}
.fa-square-person-confined {
    color: #92aac7;
}
.fa-people-arrows {
    color: #a1be95;
}

.sym_tags {
    display: flex;
    flex-wrap: wrap;
    margin-top: 3%;
}
.sym_tags a {
    margin-top: 5%;
    margin-right: 3%;
    padding: 2.5% 3.3%;
    border-radius: 9999px;
    text-decoration: none;
    border: 1px solid #a9a9a971;
    color: #757575;
    font-size: 1vw;
    font-family: ZenMaruGothic-Regular;
}

.sym_tags .sft_a:hover {
    color: #fff;
    background-color: #ed5752;
}
.sym_tags .sft2_a:hover {
    color: #fff;
    background-color: #92aac7;
}
.sym_tags .sft3_a:hover {
    color: #fff;
    background-color: #a1be95;
}

.sym_tags .fa-arrow-right {
    margin-left: 0.15rem;
    font-size: 0.7vw;
    color: #a9a9a971;
}

.sym_btn {
    width: 30%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 4%;
}
.sym_btn:hover {
    opacity: 0.7;
}
.sym_btn a {
    display: block;
    padding: 4% 3%;
    text-decoration: none;
    border-radius: 9999px;
    letter-spacing: 0.15rem;
    font-size: 1.5vw;
    color: #fff;
    background-color: #4c6cb3;
    font-family: ZenMaruGothic-Medium;
}
.sym_btn .fa-circle-chevron-right {
    font-size: 1.1vw;
    margin-left: 5%;
}


/* セクション5 */
/* faq こころの病気一覧 */
.section_faq {
    margin-top: -1%;
    padding-bottom: 3%;
    background-color: #92aac7;
}
.faq_warp {
    text-align: center;
    width: 80%;
    /* margin-top: 3%; */
    margin-left: auto;
    margin-right: auto;
    padding-top: 5%;
}
.faq_warp .faq_ttl {
    letter-spacing: 0.35rem;
    font-size: 2.4vw;
    color: #fff;
    font-family: ZenMaruGothic-Regular;
}

/* あこーでぃおん */
.accordion {
	margin: 4rem auto;
	max-width: 55%;
}

.toggle {
	display: none;
}

.faq {
	position: relative;
	margin-bottom: 1rem;
}

.question,.anser {
	transform: translateZ(0);
	transition: all 0.6s;
}

.question {
	padding: 1rem 2.2rem 1rem 1rem;
	display: block;
    border-radius: 8px 8px 0px 0px;
	color: #757575;
    background-color: #fff;
    font-family: ZenMaruGothic-Medium;
}

.question:after,.question:before {
	content: "";
	position: absolute;
	right: 1.25rem;
	top: 0;
    bottom: 0;
    margin: auto;
	width: 2px;
	height: 0.75rem;
	background-color: #757575;
	transition: all 0.6s;
}

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

.anser {
	max-height: 0;
	overflow: hidden;
    border-radius: 0px 0px 8px 8px;
    color: #757575;
    background-color: #fff;
    font-family: ZenMaruGothic-Regular;
}

.anser div {
	margin: 0;
	padding: 2rem 1rem 2rem;
	line-height: 1.8;
}

.toggle:checked + .question + .anser {
	max-height: 500px;
	transition: all 1.5s;
}

.toggle:checked + .question:before {
	transform: rotate(90deg);
}

.ddd {
    margin-top: -2%;
}

/* セクション6 */
.section_about {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

.about_flex {
    display: flex;
    gap: 15%;
}

.about_left {
    width: 60%;
    /* flex: 1; */
    color: #757575;
}
.about_left span {
    font-size: 1.2vw;
    font-family: ZenMaruGothic-Light;
}
.about_left h3 {
    letter-spacing: 0.15rem;
    line-height: 1.8;
    font-size: 2.2vw;
    font-family: ZenMaruGothic-Light;
}
.about_left p {
    margin-top: 7%;
    text-align: justify;
    line-height: 2;
    font-size: 1vw;
    letter-spacing: 0.07rem;
    font-family: ZenMaruGothic-Regular;
}

.about_right {   
    width: 50%;
    margin-top: -13%;
}
.about_right img {
    vertical-align: bottom;
    width: 100%;
}

.about_btn {
    margin-top: -4%;
    width: 25%;
}
.about_btn:hover {
    opacity: 0.7;
}
.about_btn a {
    padding: 6% 12%;
    text-decoration: none;
    border-radius: 9999px;
    font-size: 1vw;
    color: #fff;
    background-color: #ed5752;
    font-family: ZenMaruGothic-Medium;
}
.about_btn .fa-circle-chevron-right {
    margin-left: 5%;
    font-size: 0.9vw;
}

/* セクション7 */
/* doctor紹介 */
/* ulタグ */
.anime_text {
    position: relative;
    margin-top: 10%;
}

.scroll-list {
    display: flex;
    list-style: none;
    padding-inline: 0;
    margin-inline: 0;
    gap: 0;
    overflow: hidden;

    background-image: url(../images/sapporo-bg-doctor.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
  
  /* liタグ */
  .scroll-list li {
    color: #fff;
    justify-content: flex-end;

    font-size: 9vw;
    font-weight: bold;
    white-space: nowrap;
    padding: 0 0.5em 0 0;
    margin: 0;
    animation: marquee-left 16s linear infinite;
    font-family: ZenMaruGothic-Medium;
  }

  @keyframes marquee-left {
    100% {
      transform: translateX(-100%);
    }
  }

.section_doctor {
    margin-top: 5%;
}

.doctor_img {
    position: absolute;
    width: 20%;
    margin-left: auto;
    margin-right: auto;
    /* top: 60%; */
    /* left: 40%; */

    /* overflow: hidden; */
	cursor: pointer;
    /* display: block; */
    position: relative;
}
.doctor_img img {
    width: 100%;
    border-radius: 50% 50% 0 0;
    /* vertical-align: bottom; */

    position: absolute;
    top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
	display: block;
	-webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
}
.doctor_img:hover img:nth-of-type(2) {
	opacity: 0;
}

.doctor_text {
    width: 60%;
    margin-top: 13%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    line-height: 2;
    letter-spacing: 0.05rem;
    color: #757575;
}
.doctor_text h3 {
    font-family: ZenMaruGothic-Regular;
}
.doctor_text .d_t_sub {
    margin-bottom: 2%;
    font-size: 1vw;
    font-family: ZenMaruGothic-Regular;
}
.doctor_text h3 span {
    font-size: 1vw;
}

.doctor_text2 {
    width: 47%;
    margin-top: 2%;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: 0.15rem;
    color: #757575;
}
.doctor_text2 .d_t_sub2 {
    font-size: 0.9vw;
    line-height: 2.5;
    text-align: justify;
    font-family: ZenMaruGothic-Regular;
}

/* よくある質問 */
.section_situmon {
    margin-top: -3%;
    background-color: #fff;
}

.situmon {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4%;
    font-family: ZenMaruGothic-Regular;
    color: #757575;
}
.situmon h3 {
    letter-spacing: 0.15rem;
    font-size: 2.4vw;
}
.situmon span {
    font-size: 1.6vw;
}


.tab-2 {
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
    gap: 0 10px;
    max-width: 100%;
}

.tab-2 > label {
    /* flex: 1 1; */
    order: -1;
    opacity: .5;
    min-width: 15vw;
    padding: 1em 2em;
    border-radius: 5px 5px 0 0;
    background-color: #92aac7;
    color: #fff;
    font-size: .9em;
    text-align: center;
    cursor: pointer;
    font-size: 1.4vw;
    font-family: ZenMaruGothic-Regular;
}

.tab-2 > label:hover {
    opacity: .8;
}

.tab-2 input {
    display: none;
}

.tab-2 > div {
    display: none;
    width: 100%;
    padding: 1.5em 1em;
    background-color: #92aac7;
}

.tab-2 label:has(:checked) {
    opacity: 1;
}

.tab-2 label:has(:checked) + div {
    display: block;
}

.question span,.anser span {
    font-size: 160%;
    padding-right: 0.6rem;
    color: #ed5752;
    line-height: 0;
}

.fff {
    margin-top: -4%;
}

/* お知らせ */
.section_osirase {
    display: flex;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

.osirase_left {
    flex: 1;
    font-family: ZenMaruGothic-Regular;
    color: #757575;
}
.osirase_left h3 {
    letter-spacing: 0.15rem;
    font-size: 2.4vw;
}
.osirase_left span {
    font-size: 1.6vw;
}

.osirase_right {
    flex: 2;
    font-family: ZenMaruGothic-Regular;
    color: #757575;
}
.right_item {
    margin-bottom: 2%;
    line-height: 2;
    border-radius: 10px;
    padding: 4%;
    font-size: 1.2vw;
    background-color: #fff;
}
.right_item a {
    color: #757575;
    text-decoration: none;
}
.right_item span {
    font-size: 1vw;
    opacity: 0.6;
}
.right_item a:hover {
    color: #92aac7;
}

.ggg {
    margin-top: -6%;
}

/* 20歳未満の方へ */
.section_age {
    padding-bottom: 10%;
    margin-top: -1%;
    background-color: #4d648d;
    color: #fff;
    font-family: ZenMaruGothic-Regular;
}
.section_age h3 {
    padding-top: 2%;
    padding-bottom: 4%;
    letter-spacing: 0.25rem;
    font-size: 2vw;
    text-align: center;
}
.fa-triangle-exclamation {
    color: #ed5752;
    margin-right: 1%;
}
.section_age p {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    line-height: 2;
    letter-spacing: 0.07rem;
    font-size: 1.4vw;
}
.section_age span {
    font-size: 1vw;
}

.age_btn {
    width: 24%;
    margin-top: 4%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.age_btn a {
    display: block;
    padding: 4% 2%;
    text-decoration: none;
    border-radius: 9999px;
    border: 1px solid #fff;
    color: #fff;
    background-color: #4d648d;
}
.fa-file-pdf {
    margin-left: 1rem;
}
.age_btn a:hover {
    background-color: #92aac7;
}

/* 地図 */
.section_map {
    display: flex;
    color: #fff;
    background-color: #283655;
    font-family: ZenMaruGothic-Regular;
}
.map_left {
    flex: 2;
    padding-top: 2%;
    margin-left: 7%;
}
.map_left img {
    width: 60%;
    vertical-align: bottom
}
.map_left .map_left_p {
    margin-top: 1%;
    margin-left: 7%;
    /* margin-bottom: 3%; */
    line-height: 2;
}
.googlemap {
    vertical-align: bottom;
}

/* footer */
.footer-001 {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-top: 3%;
    padding-bottom: 0.5%;
    background-color: #1e1f26;
}

.footer-001__list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 1.5em;
    list-style-type: none;
    margin: 0 0 .5em;
    padding: .5em;
}

.footer-001__link {
    color: #fff;
    font-weight: 200;
    text-decoration: none;
    font-family: ZenMaruGothic-Regular;
}
.footer-001__link:hover {
    opacity: 0.5;
}

.footer-001__list li:not(:last-of-type) .footer-001__link::after {
    margin-left: 1em;
    content: "/";
}

.footer-001__copyright {
    color: #fff;
    font-size: .8em;
    padding-top: 2%;
    font-family: ZenMaruGothic-Regular;
}

/*  */
.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    left: 30px;
    bottom: 30px;
    background: #fff;
    border: solid 2px #a9a9a946;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.pagetop:hover {
    border: solid 2px #fff;
    background-color: #a9a9a9;
}

.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid #757575;
    border-right: 3px solid #757575;
    transform: translateY(20%) rotate(-45deg);
}

.form {
    width: 120px;
    height: 120px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background-color: #ed5752;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    text-decoration: none;
    color: #fff;
}
.form:hover {
    opacity: 0.5;
}

.form_btn {
    width: 100px;
    height: 100px;
    border: 4px dotted #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.form_p {
    font-size: 16px;
    text-align: center;
    font-family: ZenMaruGothic-Regular;
}
.form_p span {
    font-size: 12px;
}