#section1 { background:url(../images/common/images/common15.png);} #section1 .box1{ position:relative; background:url(../images/common/images/common15.png);} #section1 .box1 .inbox2 {position: relative;height: 100%;margin: 0;padding: 0;} #section1 .box1 .inbox2 .swiper-container {width: 100%; height: 100%;margin-left: auto;margin-right: auto;} #section1 .box1 .inbox2 .swiper-slide {display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;} #section1 .box1 .inbox2 .swiper-slide h2 { font-weight:400;} #section1 .box1 .inbox2 .swiper-slide p { font-weight:300;} #section1 .box1 .inbox2 .swiper-slide .s1{ color:#DB5343;font-weight:300;} #section1 .box1 .inbox2 .swiper-slide a:hover{ opacity:0.3;} #section1 .box1 .inbox2 .swiper-button-next{ background:url(../images/index/images/index5_2.png) rgba(0,0,0,0.00) center; background-size:100% 100%; display:block; width:31px; height:31px; z-index:100;} #section1 .box1 .inbox2 .swiper-button-prev{ background:url(../images/index/images/index5_1.png) rgba(0,0,0,0.00) center; background-size:100% 100%; display:block; width:31px; height:31px; z-index:100;} #section1 .box1 .inbox2 .swiper-button-next img{ width:100%; display:none;} #section1 .box1 .inbox2 .swiper-button-prev img{ width:100%; display:none;} #section1 .box1 .inbox2 .swiper-pagination{ width:100%; text-align:center;} #section1 .box1 .inbox2 .swiper-pagination span{background:#C1AC96; opacity:0.9;} #section1 .box1 .inbox2 .swiper-pagination .swiper-pagination-bullet-active{ background:#62BB1F;} #section2 {background:url(../images/common/images/common16_6.png); background-size:100% 100%;} #section2 .box1 .leftbox .txt1{ background:url(../images/index/images/index6.png); background-size:100% 100%;display:flex;align-items: center;justify-content: center; color:#007A28;} #section2 .box1 .leftbox .txt2 .s1{ background:#fff; color:#007A28; padding:0.1em 2em; border:solid #007A28 0.1em; border-radius:1.25em;} #section2 .box1 .leftbox .txt3{ color:#DB5343;} #section2 .box1 .leftbox .img1{ width:474px;} #section2 .box1 .rightbox .txtbox{ border:solid #6FB92C 0.5em; border-radius:3em; background:#fff;} #section2 .box1 .rightbox .txt1{ text-align:center;} #section2 .box1 .rightbox .txt2{ color:#DB5343;display:flex;align-items: center;justify-content: center; position:relative; font-weight:600;} #section2 .box1 .rightbox .txt2 .s1{color:#DB5343; font-weight:600;} #section2 .box1 .rightbox .txt2 img{ padding-right:0.5em;} #section2 .box1 .rightbox h2{ font-weight:300;} #section2 .box1 .rightbox .txt3{ padding-left:6.5em; position:relative; font-weight:300;} #section2 .box1 .rightbox .txt3 .s1{ position:absolute; left:0.5em; font-weight:300;} #section2 .box1 .rightbox .txt4{ padding-left:1em; position:relative; font-weight:300;} #section2 .box1 .rightbox .txt4 .s1{ position:absolute; left:0; top:0; color:#DB5343;} #section2 .box2 h2{background:url(../images/common/images/common16_5.png); background-size:100% 100%;} #section2 .box2 .txt1{ border-top:solid 0.05em #727171;border-bottom:solid 0.05em #727171; color:#DB5343; text-align:center; padding:0.5em 0;} #section2 .box2 .txt1 .s1{color:#DB5343;} #section2 .box2 a:hover{ color:#DB5343;} #section3 .box1{background:url(../images/common/images/common15.png);} #section3 .box1 h3{ color:#6FB92C;} #section3 .box1 .inbox li a{margin:auto; border:solid #007A28 0.1em; border-radius:1em;display:flex;align-items: center;justify-content: center; background:#fff; color:#007A28;} #section3 .box1 .inbox li a:hover{ background:#007A28; color:#fff;} #section3 .box1 .inbox2 .title1{color:#DB5343;} #section3 .box1 .inbox2 .txtbox h3{ color:#DB5343;} #section3 .box1 .inbox2 .txtbox p .s1{ color:#DB5343;} #section4 .box1 { background:#C0E28D;} #section4 .box1 .box{ background:#fff; position:relative; border-radius:0.5em;} #section4 .box1 .box h3{ color:#fff; background:#007A28; border-bottom-right-radius:1em;border-top-right-radius:1em;} #section4 .box1 .txt1{ font-weight:300;} #section4 .box1 .txt2{ font-weight:300;} #section4 .box1 .txt2 .s1{ color:#DB5343;} #section4 .box1 .txt3{ font-weight:300;} #section4 .box1 .txt3 .s1{ color:#DB5343;} #section5 .box1 ul li a{ display:block;} #section5 .box1 ul li a:hover{ opacity:0.3;} #section5 .box1 ul li:nth-of-type(1) a{background:url(../images/index/images/index9_1.png); background-size:100% 100%;} #section5 .box1 ul li:nth-of-type(2) a{background:url(../images/index/images/index9_2.png); background-size:100% 100%;} #section5 .box1 ul li:nth-of-type(3) a{background:url(../images/index/images/index9_3.png); background-size:100% 100%;} #section5 .box1 h3{ color:#007A28; text-align:center;} #section5 .box1 ul li p{ font-weight:300;} #section5 .box2 .leftbox .txt2{display:flex;align-items: center;} #section5 .box2 .leftbox .txt2 .s1{ color:#DB5343;} #section5 .box2 .txtbox{ background:#fff; border:solid 0.1em #A7A79D; border-radius:1em;} #section5 .box2 .rightbox .txt3 .s1{ background:#fff; color:#007A28; padding:0.1em 2em; border:solid #007A28 0.1em; border-radius:1.25em;} #section5 .box2 .rightbox .txt4{ color:#DB5343;} @media screen and (min-width: 769px) { .nav_fix_off .nav_in_wrapper { bottom: 0; } /* ヘッダー初診予約バナーここから */ header .top_reserve_btn { position: absolute; right: 0; top: 0; width: 130px; height: 30px; border-radius: 5px; text-align: center; } header .top_reserve_btn a { position: relative; display: block; width: 100%; height: 100%; padding: 0 20px 0 0; border-radius: 5px; background: #007A28; font-size: 13px; color: #fff; line-height: 30px; letter-spacing: .05em; } header .top_reserve_btn a:before { content: ">>>"; position: absolute; right: 5px; } /* ヘッダー初診予約バナーここまで */ header .header_inbox .rightbox .txt1 .s1{ color:#007A28;} header .header_wrapper{ background:none;} header .header_inbox{ background:none;} /* #section1{ height:1340px;} */ #section1 { /* height:1520px; */ } #section1 .box1 { top:-150px; margin-bottom:-150px; width:100%; min-width:1020px; max-width:2040px; margin:auto; overflow: hidden; } #section1 .box1 .inbox1{ width:1020px; margin:auto; height:150px; position:relative; z-index:5;} #section1 .box1 .inbox1 .img1{ top:0; right:-30px; position:absolute;} /* #section1 .box1 .inbox2{top:-70px; z-index:1; padding-bottom:860px; width:100%; min-width:1020px; overflow:hidden;} */ #section1 .box1 .inbox2 { top:20px; z-index:1; padding-bottom:105px; width:100%; min-width:1020px; overflow:hidden; } #section1 .box1 .inbox2 .swiper-slide .box{width:1011px; height:443px; position:relative; display:block;} #section1 .box1 .inbox2 .swiper-slide h2{padding:65px 0 30px 65px;font-size:30px;} #section1 .box1 .inbox2 .swiper-slide p{ padding:0 0 30px 65px;} #section1 .box1 .inbox2 .swiper-slide a{ margin-left:64px;} #section1 .box1 .reef_img1{ position:absolute; bottom:0; z-index:1;} #section1 .box1 .reef_img2{ position:absolute; top:0; z-index:1;} #section1 .box1 .inbox2 .slide1 .box {background:url(../images/index/images/index1_1.png); background-size:100% 100%;} #section1 .box1 .inbox2 .slide2 .box{background:url(../images/index/images/index1_2.png); background-size:100% 100%;} #section1 .box1 .inbox2 .slide3 .box{background:url(../images/index/images/index1_3.png); background-size:100% 100%;} #section1 .box1 .inbox2 .btn_box{ width:1000px; margin:auto; position:relative;} #section1 .box1 .inbox2 .swiper-button-next{ width:31px; height:31px; top:-210px;} #section1 .box1 .inbox2 .swiper-button-prev{ width:31px; height:31px; top:-210px;} #section1 .box1 .inbox2 .swiper-pagination span{ width:15px; height:15px; margin:15px;} #section1 .box1 .inbox3 { /* width:707px; height: 724px; height: auto; bottom:-400px; position:absolute; left:50%; -webkit-transform: translate(-50%, -0%); */ /* Safari用 */ /* transform: translate(-50%, -0%);z-index:10000; background:rgba(255,255,255,0.80); border:solid 2px #007A28; border-radius:10px; padding:20px; */ width: 707px; /* height: 824px; */ z-index: 10000; background: rgba(255,255,255,0.80); border: solid 2px #007A28; border-radius: 10px; padding: 20px; margin: 0 auto; } #section1 .box1 .inbox3 h3{ text-align:center; color:#227A28; font-weight:600;} #section1 .box1 .inbox3 li{ padding:5px 0;justify-content:center;align-items:center;} #section1 .box1 .inbox3 li a.monshinhyo { color:#007A28;border-bottom:solid 1px #007A28;} #section1 .box1 .inbox3 li a{font-size:16px;border-bottom:solid 1px #007A28; color:#007A28;} #section1 .box1 .inbox3 li a:hover{ color:#DB5343;} .corona { position: absolute; bottom: 160px; right: 0; left: 0; width: 707px; border: 2px solid #f00; border-radius: 10px; padding: 20px; margin: 0 auto; background: #fff; } .c_title { margin: 0 0 5px; font-size: 18px; font-weight: 600; color: #f00; text-align: center; } .t_right { display: block; padding: 0 20px 0 0; text-align: right; } /* #section2 .box0{display:flex;justify-content:center;align-items:center;padding:40px 0;} */ #section2 .box0{width: 474px; padding:20px 0;} #section2 .box0 img{ width: 474px; } #section2 .box0 a{ display:block;} #section2 .box0 a:hover{ opacity:0.5;} #section2 .box1 .inbox{ width:980px; margin:auto; padding:40px 0;} #section2 .box1 .leftbox{ width:480px; float:left; margin-right: 30px;} #section2 .box1 .leftbox .img1{ padding-top:10px;} #section2 .box1 .leftbox .txt1{ width:463px; height:73px; font-size:35px;} #section2 .box1 .leftbox .txt2 { font-size:18px; padding:10px 0;} #section2 .box1 .leftbox .txt2 .s1{ font-size:18px; margin-right:0.5em;} #section2 .box1 .leftbox .txt3{ font-size: 16px; padding-left:10px;} /* section2Ubieバナーここから */ #section2 .box_ubie { width: 474px; padding: 20px 0; } #section2 .box_ubie img { width: 474px; } #section2 .box_ubie a { display: block; } #section2 .box_ubie a:hover { opacity: 0.5; } /* section2Ubieバナーここまで */ #section2 .box1 .rightbox{ width:460px; float:left;} #section2 .box1 .rightbox .txtbox{padding:15px;} #section2 .box1 .rightbox .txt1{ font-size:23px; padding:10px 0 0;} #section2 .box1 .rightbox .txt1.zaitaku{ padding:30px 0 0;} #section2 .box1 .rightbox .txt2{ font-size:40px;} #section2 .box1 .rightbox .txt2 .s1{font-size:40px;} #section2 .box1 .rightbox .txt2 img{ width:37px;} #section2 .box1 .rightbox h3{ padding:10px 0 5px; border-top:solid #6FB92C 0.3em; margin-top:10px;} #section2 .box1 .rightbox .txt3{ font-size:15px; padding-bottom:10px;} #section2 .box1 .rightbox .txt3 .sp{ display: none;} #section2 .box1 .rightbox .txt3 .s1{ font-size:15px;} #section2 .box1 .rightbox .txt4{ font-size:15px; padding-bottom:0px;} #section2 .box1 .rightbox .txt4 .s1{ font-size:15px;} #section2 .box2{ width:960px; margin:auto; position:relative; padding-bottom:30px;} #section2 .box2 ul{ width:90%; margin:auto; padding:0.25em 0;} #section2 .box2 li{ padding:0.25em 0;} #section2 .box2 .a1{ position:absolute; right:2em; bottom:5em;} #section2 .box2 .txt1{ font-size:17px;} /* section2初診予約バナーここから */ #section2 .section2_reserve_btn { width: 320px; height: 40px; border-radius: 5px; margin: 10px auto; text-align: center; } #section2 .section2_reserve_btn a { position: relative; display: block; width: 100%; height: 100%; border-radius: 5px; background: #007A28; font-size: 18px; color: #fff; line-height: 40px; letter-spacing: .05em; } #section2 .section2_reserve_btn a:before { content: ">>>"; position: absolute; right: 10px; } #section2 .section2_reserve_btn a:hover { opacity: .7; transition: .4s; } /* section2初診予約バナーここまで */ #section3 .box1 .inbox{ width:960px; margin:auto; padding:30px 0;} #section3 .box1 .inbox ul{ width:920px; margin:auto;} #section3 .box1 .inbox li{ float:left; width:25%; padding:10px 0;} #section3 .box1 .inbox h3{font-size:20px; padding:30px 0 0 40px;} #section3 .box1 .inbox li a{ height:47px; width:210px; font-size:18px; border-radius:9px;} #section3 .box1 .inbox2{ width:980px; margin:auto; padding-bottom:50px;} #section3 .box1 .inbox2 .txtbox{background:url(../images/index/images/index11_1.png); background-size:100% 100%; width:849px; height:280px; margin:auto; padding:20px 40px;} #section3 .box1 .inbox2 .txtbox h3{ font-size:54px;} #section3 .box1 .inbox2 .txtbox p{ line-height:2; padding-bottom:30px;} #section4 .box1{ padding:50px 0 1px;} #section4 .box1 .box{ width:880px; margin:0 auto 50px; padding:30px 0 80px; min-height:255px;} #section4 .box1 h3{ font-size:28px; padding-left:40px; width:318px;} #section4 .box1 .img1{ position:absolute; right:0; bottom:0; height:365px;} #section4 .box1 .img2{ position:absolute; right:220px; bottom:20px; width:175px; opacity:0;} #section4 .box1 .img3{ position:absolute; right:-30px; top:-30px; width:263px; opacity:0;} #section4 .box1 .txt1{ padding:20px 0 0 40px; position:relative; z-index:2; width:600px; text-shadow:1px 1px 1px #fff;} #section4 .box1 .txt2{ padding:10px 0 0 40px; position:relative; z-index:2; width:440px;} #section4 .box1 .txt3{ padding:10px 0 0 60px; position:relative; z-index:2; width:420px;} #section4 .box1 .txt3 .s1{ position:absolute; top:10px; left:40px;} #section4 .box1 .more_btn1{ position:absolute; bottom:20px; left:40px;} #section4 .box1 .anime1_a .img2{ animation-name:anime1; animation-delay:0.5s; animation-timing-function:ease; animation-duration:1s;animation-fill-mode: forwards;} #section4 .box1 .anime1_a .img3{ animation-name:anime1; animation-delay:1s; animation-timing-function:ease; animation-duration:1s;animation-fill-mode: forwards;} #section5 .box1 ul{ width:1020px; margin:auto; padding:50px 0;} #section5 .box1 ul li{ width:33.333%; float:left;} #section5 .box1 ul li a{ width:290px; margin:auto; height:230px;} #section5 .box1 li h3{ padding-top:110px; font-size:25px;} #section5 .box1 li p{ padding:10px 20px;} #map_canvas{ width:980px; margin:50px auto; height:360px;} .map {width:980px; margin:50px auto; height:360px;} .map iframe {width: 100%; height: 100%;} #section5 .box2{ width:1000px; margin:auto; padding:30px 0;} #section5 .box2 .leftbox{ width:430px; float:left;} #section5 .box2 .leftbox .txt1{ font-size:19px;} #section5 .box2 .leftbox .txt2{ font-size:18px; padding:5px 0;} #section5 .box2 .leftbox .txt2 .s1{ font-size:18px;} #section5 .box2 .leftbox .txt2 img{ height:30px; padding-right:10px;} #section5 .box2 .leftbox .txt3{ font-size:18px;} #section5 .box2 .rightbox{ width:550px; float:right;} #section5 .box2 .txtbox{display: flex; justify-content: space-between; padding:10px;} #section5 .box2 .rightbox .txt2{ font-size:27px;display:flex;align-items: center;} #section5 .box2 .rightbox .txt2 .s1{font-size:27px;} #section5 .box2 .rightbox .txt2 img{ width:60px;} #section5 .box2 .rightbox .txt2 .a1{ display:none;} #section5 .box2 .rightbox .txt3 { font-size:20px; padding:10px 0;} #section5 .box2 .rightbox .txt3 .s1{ font-size:20px; margin-right:0.5em;} } @media screen and (min-width: 769px) and (max-width: 1537px) { #section1 .box1 .reef_img1{left:calc(50% - 803px);} #section1 .box1 .reef_img2{right:calc(50% - 769px);} } @media screen and (min-width: 1538px) and (max-width: 1605px) { #section1 .box1 .reef_img1{left:0;} #section1 .box1 .reef_img2{right:calc(50% - 769px);} } @media screen and (min-width: 1606px){ #section1 .box1 .reef_img1{left:0;} #section1 .box1 .reef_img2{right:0;} } .red { color: #DB5343; } /* スマホ初診予約固定ボタンここから */ .fixed_reserve_btn { display: none; } /* スマホ初診予約固定ボタンここから */ /*ーーーーーーーーーーーーーーーー spの時のみ使用するCSS ーーーーーーーーーーーーーーーー*/ @media screen and (max-width: 768px) { .pc { display: none; } #section1 { padding-bottom: 20px; } #link1{bottom:15.8vw;} #section1 .box1 .inbox1 { display:none;} /* #section1 .box1 .inbox2{ padding-bottom:255vw;} */ /* #section1 .box1 .inbox2{ padding-bottom:145vw;} */ #section1 .box1 .inbox2{ padding-bottom:0; margin-bottom: -40px;} #section1 .box1 .inbox2 .swiper-slide .box{ width:100%;} #section1 .box1 .inbox2 .swiper-slide .box .imgbox{display:block; width:100%; height:62.7vw;} #section1 .box1 .inbox2 .swiper-slide h2{ margin:7vw 0 0 5vw; font-size:4vw; height:15vw; line-height:1.2em;} #section1 .box1 .inbox2 .swiper-slide p{ margin:3vw 0 0 5vw; } #section1 .box1 .inbox2 .swiper-slide h2 img{ width:30vw;} #section1 .box1 .inbox2 .swiper-slide p .s1{ font-size:4.5vw;} #section1 .box1 .inbox2 .swiper-slide p{ font-size:4.5vw; padding:10vw 0 5vw; display:table; margin:auto;} #section1 .box1 .inbox2 .swiper-slide a { display:table; margin:auto;} #section1 .box1 .inbox2 .swiper-slide a img{ width:40vw;} #section1 .box1 .inbox2 .slide1 .box .imgbox{background:url(../images/index/images/index2_1.png); background-size:100% 100%;} #section1 .box1 .inbox2 .slide2 .box .imgbox{background:url(../images/index/images/index2_2.png); background-size:100% 100%;} #section1 .box1 .inbox2 .slide3 .box .imgbox{background:url(../images/index/images/index2_3.png); background-size:100% 100%;} #section1 .box1 .inbox2 .btn_box{ width:100%; margin:auto; position:absolute;left:50%;top: 85vw;-webkit-transform: translate(-50%, -0%);/* Safari用 */transform: translate(-50%, -0%); height:5vw; z-index:10;} #section1 .box1 .inbox2 .swiper-button-next{ width:10vw; height:10vw; top:-37vw; margin:0;} #section1 .box1 .inbox2 .swiper-button-prev{ width:10vw; height:10vw; top:-37vw; margin:0;} #section1 .box1 .inbox2 .swiper-pagination span{ width:5vw; height:5vw; margin:0 5vw;} /* #section1 .box1 .inbox3{ width:80vw; bottom:2.5vw; position:absolute;left:50%;-webkit-transform: translate(-50%, -0%);transform: translate(-50%, -0%);z-index:10000; background:rgba(255,255,255,0.80); border:solid 0.5vw #007A28; border-radius:1vw; padding:2.5vw;height:265vw; overflow:hidden;} */ /* #section1 .box1 .inbox3{ width:80vw; bottom:2.5vw; position:absolute;left:50%;-webkit-transform: translate(-50%, -0%);transform: translate(-50%, -0%);z-index:10000; background:rgba(255,255,255,0.80); border:solid 0.5vw #007A28; border-radius:1vw; padding:2.5vw;height:160vw; overflow:scroll;} */ #section1 .box1 .inbox3{ width:80vw; bottom:-151.5vw; position:static;left:50%;-webkit-transform: none;transform: none;z-index:10000; background:rgba(255,255,255,0.80); border:solid 0.5vw #007A28; border-radius:1vw; padding:2.5vw;height:160vw; overflow:scroll; margin: 0 auto;} #section1 .box1 .inbox3 h3{ text-align:center; color:#227A28; font-weight:600;} #section1 .box1 .inbox3 ul{ padding-bottom:5vw;} #section1 .box1 .inbox3 li{ padding:2vw 0;justify-content:center;align-items:center;font-size:4vw; } #section1 .box1 .inbox3 li a{font-size:4vw; border-bottom:solid 1px #007A28; color:#007A28; } #section1 .box1 .reef_img1{ display:none;} #section1 .box1 .reef_img2{ display:none;} .corona { position: static; bottom: 16.5vw; right: 0; left: 0; width: 80vw; border: 2px solid #f00; border-radius: 10px; padding: 2.5vw; margin: -60px auto 20px; background: #fff; } .c_title { margin: 0 0 5px; font-size: 4.8vw; color: #f00; text-align: center; } .c_text { font-size: 4vw; line-height: 1.8; } .t_right { display: block; padding: 0; text-align: right; font-size: 4vw; } #section2 .box0{display:flex;justify-content:center;align-items:center;padding:40px 0; } #section2 .box0 a{ display:block; width:80vw;} #section2 .box0 a img{ width:100%;} #section2 .box1 .leftbox{ width:100%; padding-top:5vw;} #section2 .box1 .leftbox .img1{ width:95%; margin:auto; display:block; padding:5vw 0 0;} #section2 .box1 .leftbox .txt2 {font-size:5vw; padding:2vw 5vw 0;} #section2 .box1 .leftbox .txt2 .s1{ font-size:5vw; display:table; margin-bottom:2vw;} #section2 .box1 .leftbox .txt1{ width:90vw; height:14.2vw; font-size:5vw; margin:auto;} #section2 .box1 .leftbox .txt3{ width:90vw; margin:auto; padding:2vw 0;} #section2 .box1 .rightbox{ width:95%; margin:auto; padding:5vw 0;} #section2 .box1 .rightbox .txtbox{padding:1em;} #section2 .box1 .rightbox .txt1{ font-size:5vw; padding:1vw 0 0;} #section2 .box1 .rightbox .txt2{ font-size:8vw;} #section2 .box1 .rightbox .txt2 .s1{font-size:8vw;} #section2 .box1 .rightbox .txt2 .a1{ position:absolute; width:85%; display:block; top:1vw; left:8%; height:10vw;} #section2 .box1 .rightbox .txt2 img{ width:8vw;} #section2 .box1 .rightbox h3{ padding:2vw 0 1vw; border-top:solid #6FB92C 0.3em; margin-top:2vw;} #section2 .box1 .rightbox .txt3{ font-size:4vw; padding-bottom:4vw;} #section2 .box1 .rightbox .txt3 .s1{ font-size:4vw;} #section2 .box1 .rightbox .txt4{ font-size:4vw; padding-bottom:4vw;} #section2 .box1 .rightbox .txt4 .s1{ font-size:4vw;} #section2 .box2{ padding-bottom:5vw;} #section2 .box2 ul{ width:95%; margin:auto;} #section2 .box2 li{ padding:0.25em 0;} #section2 .box2 li .date{ display:block;} #section2 .box2 .txt1{ padding:0.5em 1em 0.5em 2em; text-align:left; position:relative;} #section2 .box2 .txt1 .s1{ position:absolute; left:1em; top:0.5em;} #section2 .box2 .a1{ margin:5vw auto; display:table; border:solid #333 0.1em; padding:0.25em 0.5em; border-radius:1.25em;} /* section2Ubieバナーここから */ #section2 .box_ubie img { width: 80vw; } #section2 .box_ubie { text-align: center; } /* section2Ubieバナーここまで */ /* section2初診予約バナーここから */ #section2 .section2_reserve_btn { width: 80%; height: 40px; border-radius: 5px; margin: 10px auto; text-align: center; } #section2 .section2_reserve_btn a { position: relative; display: block; width: 100%; height: 100%; border-radius: 5px; background: #007A28; font-size: 4.4vw; color: #fff; line-height: 40px; letter-spacing: .05em; } #section2 .section2_reserve_btn a:before { content: ">>>"; position: absolute; right: 10px; } #section2 .section2_reserve_btn a:hover { opacity: 1; transition: none; } /* section2初診予約バナーここまで */ #section3 .box1 .inbox{ width:100%; margin:auto; padding:5vw 0;} #section3 .box1 .inbox ul{ widows:100%; margin:auto;} #section3 .box1 .inbox li{ float:left; width:50%; padding:2vw 0 3vw;} #section3 .box1 .inbox h3{font-size:6vw; padding:3vw 0 0 3vw;} #section3 .box1 .inbox li a{ height:10vw; width:95%; font-size:4vw;} #section3 .box1 .inbox2{ width:95%; margin:auto; padding-bottom:10vw;} #section3 .box1 .inbox2 .txtbox h3{ font-size:6vw; text-align:center; background:#fff;} #section3 .box1 .inbox2 .txtbox .imgbox{background:url(../images/index/images/index11_2.png); background-size:100% 100%; width:100%; height:55vw;} #section3 .box1 .inbox2 .txtbox p{ padding:5vw; letter-spacing:-0.05em; line-height:1.8;} #section3 .box1 .inbox2 .more_btn2{ margin:auto;} #section4 .box1{ padding:5vw 0;} #section4 .box1 .box{ width:95%; margin:0 auto 5vw; padding:5vw 0;} #section4 .box1 h3{ font-size:7vw; padding-left:5vw; width:80%;} #section4 .box1 .img1{ width:100%; margin:auto; display:block; padding: 5vw 0;} #section4 .box1 .img2{ width:30%; display:block; position:absolute; top:20vw; left:10vw;} #section4 .box1 .img3{ width:50%; margin-left:auto; display:block; padding:10vw 10vw 5vw;} #section4 .box1 .txt1{ padding:5vw; font-size:4vw;} #section4 .box1 .txt2{ padding:0 5vw 5vw; font-size:4vw;} #section4 .box1 .txt2 .s1{ font-size:4vw;} #section4 .box1 .txt3{ padding:1vw 5vw 5vw; font-size:3vw;} #section4 .box1 .txt3 .s1{ font-size:3vw;} #section4 .box1 .more_btn1{ margin:auto;} #section5 .box1 ul{ width:95%; margin:auto; padding:5vw 0 0;} #section5 .box1 ul li{ width:100%; padding:0 0 5vw;} #section5 .box1 ul li a{ width:80vw; height:63.5vw; margin:auto;} #section5 .box1 li h3{ padding-top:33vw; font-size:6vw;} #section5 .box1 li p{ padding:2vw 5vw;} #map_canvas{ width:90%; margin:5vw auto; height:70vw;} #section5 .box2 .leftbox{ width:95%; margin:auto;} #section5 .box2 .leftbox .txt1{ font-size:6vw; text-align:center;} #section5 .box2 .leftbox .txt2{ font-size:6vw; padding:2vw 0; justify-content: center;} #section5 .box2 .leftbox .txt2 .s1{ font-size:7vw;} #section5 .box2 .leftbox .txt2 img{ height:8vw; padding-right:0.5em;} #section5 .box2 .leftbox .txt3{ font-size:4vw; text-align:center; letter-spacing:-0.05em; padding-bottom:10vw;} #section5 .box2 .rightbox { width:95%; margin:auto; padding-bottom:10vw;} #section5 .box2 .rightbox .txtbox{ padding:5vw;} #section5 .box2 .rightbox .txtbox .zaitaku{ margin: 20px 0 0;} #section5 .box2 .rightbox .txt2{ font-size:8vw;display:flex;align-items: center; position:relative;} #section5 .box2 .rightbox .txt2 a{ font-size:8vw;display:flex;align-items: center;} #section5 .box2 .rightbox .txt2 .s1{font-size:8vw;} #section5 .box2 .rightbox .txt2 img{ width:18vw;} #section5 .box2 .rightbox .img1{ width:100%;} #section5 .box2 .rightbox .txt2 .a1{width:100%; height:10vw; display:block; position:absolute; top:1vw; left:0; } .red { color: #DB5343; font-size:4vw; } .oshirase_span { font-size: 4vw; } /* スマホ初診予約固定ボタンここから */ .fixed_reserve_btn { position: fixed; z-index: 200; right: 0; bottom: 16.6vw; display: block; width: 80px; height: 80px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.80); text-align: center; } .fixed_reserve_btn a { display: block; width: 100%; height: 100%; padding: 15px 0 0; box-sizing: border-box; border-radius: 50%; background: #007A28; font-size: 14px; color: #fff; letter-spacing: .05em; } .fixed_reserve_btn a:hover { opacity: 1; transition: none; } /* スマホ初診予約固定ボタンここから */ } @keyframes anime1{0%{ transform:translateY(-40%); opacity:0;}100%{transform:translateY(0%); opacity:1;}}