@charset "UTF-8";

/*
Theme Name: Twenty Twenty-One
Theme URI: https://wordpress.org/themes/twentytwentyone/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Requires at least: 5.3
Tested up to: 6.2
Requires PHP: 5.6
Version: 1.8
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyone
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready

Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org
Twenty Twenty-One is distributed under the terms of the GNU GPL.
*/
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}:where([hidden]:not([hidden='until-found'])){display:none!important}:where(html){-webkit-text-size-adjust:none;color-scheme:dark light}@supports not (min-block-size:100dvb){:where(html){block-size:100%}}@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}:where(body){block-size:100%;block-size:100dvb;line-height:1.5;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}:where(input,button,textarea,select){font:inherit;color:inherit}:where(textarea){resize:vertical;resize:block}:where(button,label,select,summary,[role='button'],[role='option']){cursor:pointer}:where(:disabled){cursor:not-allowed}:where(label:has(>input:disabled),label:has(+input:disabled)){cursor:not-allowed}:where(button){border-style:solid}:where(a){text-underline-offset:.2ex}:where(ul,ol){list-style:none}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,picture,svg){max-inline-size:100%;block-size:auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(h1,h2,h3){line-height:calc(1em + 0.5rem)}:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(:focus-visible){outline:2px solid var(--focus-color,Highlight);outline-offset:2px}:where(.visually-hidden:not(:focus,:active,:focus-within,.not-visually-hidden)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #fff;
    color: #000;
  }
}

body {
  font-family: "Yu Gothic Medium", "游ゴシック Medium","游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic","Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif !important;
letter-spacing:0.01rem;
color:#555;
}
.center{
text-align:center;
}
a{
text-decoration:none;
}

@media only screen and (max-width: 481px) {

.sp{
display:block;
}
.pc{
display:none;
}

/*menu*/

.menu-btn {
    position: fixed;
    top: 0.5em;
    right: 0.5em;
    display: flex;
    height: 3em;
    width: 3em;
    justify-content: center;
    align-items: center;
    z-index: 90;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 0.1em;
    width: 1.5em;
    border-radius: 1.5em;
    background-color: white;
    position: absolute;
}
.menu-btn span{
margin:0 0 0 0.1em;
}
.menu-btn span:before {
    bottom: 0.4em;
    transition: all 0.5s;/*アニメーション設定*/
}
.menu-btn span:after {
    top: 0.4em;
    transition: all 0.5s;/*アニメーション設定*/
}
#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
    background-color: rgba(255, 255, 255, 1);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
    background-color: rgba(255, 255, 255, 1);
}
#menu-btn-check {
    display: none;
}
.menu-content {
    width: 50%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 80;
    background-color: #3584bb;
}
.menu-content ul {
    padding: 3.5em 0.5em 0;
}
.menu-content ul li {
    border-bottom: solid 0.05em #ffffff;
    list-style: none;
}
.menu-content ul li p{
    color:#ffffff;
    font-size: 0.9rem;
    padding: 0.5rem 0;
}
.menu-content ul li.language{
height:2rem;line-height:2rem;
border-bottom:none;
color:white;
font-size:0.8rem;
}
.menu-content ul li.language span{
padding:0.1rem 0.5rem;
background-color:steelblue;
cursor: pointer;
}

.menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 0.75em;
    box-sizing: border-box;
    color:#ffffff;
    text-decoration: none;
    padding: 0.5em 0.75em 0.5em 0;
    position: relative;
}
.menu-content ul li a::before {
    content: "";
    width: 0.35em;
    height: 0.35em;
    border-top: solid 0.1em #ffffff;
    border-right: solid 0.1em #ffffff;
    transform: rotate(45deg);
    position: absolute;
    right: 0.55em;
    top: 0.8em;
}
.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    background-color: rgba(10,65,105,0.95);
    transition: all 0.5s;/*アニメーション設定*/
}
#menu-btn-check:checked ~ .menu-content {
    left: 0%;/*メニューを画面内へ*/
}
.head{
width:100%;
height:4rem;
position:fixed;
top:0;
text-align:center;
z-index:100;
    background-color: rgba(130,130,130,0.7);
}
.head-parts{
position:relative;
width:100%;height:100%;
margin:auto;
}
.head img{
position:absolute;
top:0.25rem;left:2.25rem;
height:3.5rem;width:auto;
}
.head .header-text{
font-size:1rem;
font-weight:normal;
line-height:4rem;
color:white;
}

.entry-content{
font-size:1rem;
line-height:2rem;
}

.videowrap{
width:100%;height:100vh;
overflow:hidden;
text-align:center;
position:relative;
}
.videowrap p{
font-size:1.5rem;font-weight:bold;
line-height:4rem;
z-index:5;
color:white;
text-shadow: 0 0 0.2rem #aaa;
position:absolute;top:38%;text-align:center;width:100%;
}

video{
height:100vh !important;
width:auto !important;
position: absolute;
  left: 50%;
  transform: translate(-50%,0);
}

/*Scrollテキストの描写*/
.scrolldown2 span{
    /*描画位置*/
	position: absolute;
    left: calc(50% + 0.2rem);
    bottom: 1.5rem;
    color: #eee;
    font-size: 1.1rem;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown2:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:calc(50% - 0.2rem);
    /*丸の形状*/
	width:0.5rem;
	height:0.5rem;
	border-radius: 50%;
	background:#eee;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
	animation:
		circlemove 1.6s ease-in-out infinite,
		cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:5.4rem;}
     100%{bottom:-0.25rem;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
	100%{opacity:0;}
 }

/* 線の描写 */
.scrolldown2:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	left:50%;
    /*線の形状*/
	width:0.1rem;
	height: 5.8rem;
	background:#eee;
}


section.articles{
width:100%;
margin:0 auto;
}
section.top-parts{
margin-bottom:2rem;
}
section.top-parts h2{
    font-size:3rem;
    margin: 6rem auto 2rem;
    width: 90%;
    text-align: center;
}
.mission-box01{
width:100%;height:auto;
}

.mission-box01.mi1{
background:linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) ,url("http://ones-group.conohawing.com/images/top/003.jpeg");
background-size:auto 100%;
    background-repeat:  no-repeat;              /* 背景の繰り返し設定 */
    background-position: center top;          /* 背景の位置指定 */
    position:relative;
    height: 26rem;
    margin-bottom: 16rem;
}
.mission-box01 > p:nth-of-type(1){
font-weight:bold;
font-size:2.8rem;line-height:130%;
color:white;text-shadow:0 0 1rem black;
position:absolute;
    top: 4rem;
    left: 0;
    width: 100%;
    text-align: center;
}
.mission-box01.mi1 > div{
    position:absolute;
    top: 15rem;
    left: 10%;
    width: 80%;
    padding: 1rem 1rem 0.3rem;
    color: white;
    background-color: #332;
    opacity: 0.7;
    border: 0.1rem solid #554;
}
.mission-box01 > div p{
margin-bottom:0.7rem;
}
.mission-box01 .right{
text-align:center;
width:100%;
height:auto;
margin:auto;
	}
.mission-box01 .right p{
	display:none;
}
.mission-box01 .right a{
height:100%;width:19%;
}
.mission-box01 .right p{
position:absolute;
bottom:0.8rem;right:0.8rem;
color:white;font-size:1.8rem;letter-spacing:0.1rem;font-weight:bold;
}
.mission-box01 .right .hoverlink{
display:inline-block;
height:10rem;width:100%;
margin:0;
overflow:hidden;
position:relative;
}
.mission-box01 .right .hoverlink .caption{
color:#fff;
padding-left: 5%;
    width: 95%;
    font-size: 3.3rem;
    font-weight: bold;
    text-align: left;
    line-height: 4rem;
}
.mission-box01 .right .hoverlink .caption span{
font-size:1.2rem;
font-weight:normal;
}

.mission-box01 .right .hoverlink .mask{
	width:			100%;
	height:			100%;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		1;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.3);
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
}

.mission-box01 .right img{
height:100%;width:100%;
object-fit: cover;
}
li.wp_rss_retriever_item{
    width: 11.5rem;
    height: 10rem;
    margin: 0 0.25rem;
    display: inline-block;
    position:relative;
}
.wp_rss_retriever_image{
    width: 11.5rem !important;
    height: 10rem !important;
    object-fit: cover;
    position:absolute;top:0;right:0;
    margin:0 !important;
}
.wp_rss_retriever_title{
    width: 10.7rem !important;
    height:3rem !important;
    font-size: 0.75rem;
    line-height: 1rem;
    padding-top: 0.5rem;
    padding-right:0.5rem;
    text-align: left;
    position: absolute;
    bottom: -1rem;left:0;
    background-color: rgba(255, 255, 255, 1);
    z-index:10;
    color:black;
    text-decoration:none;
}

.wp_rss_retriever_container,
.wp_rss_retriever_credits,
.wp_rss_retriever_metadata{
display:none !important;
}
.aboutus h2{
font-size:1.5rem;
margin:2.5rem auto;
}
h1.localpage-title{
margin:8rem auto 7rem auto;
width:100%;
font-size:2rem;
text-align:center;
line-height:4rem;
z-index:5;
color:white;
text-shadow: 0 0 0.2rem #808080;
}
.articles.news-detail{
width:90%;
margin:auto;
}
.articles.news-detail h1{
font-size:1.25rem;
margin-bottom:2rem;
}
.local-pagetop{
}
.local-pagetop img{
position:absolute;
height:30vh;
width:100%;
    object-fit: cover;
top:0;
z-index:-1;
}

.message img{
width:100%;height:auto;
vertical-align:top;
margin:0 0 1rem 0;
}
.message .message-box{
width:90%;height:auto;
vertical-align:top;
margin:0 auto 3rem auto;
}
.message .message-box .name,
.message .message-box .position{
    text-align:center;
    font-size:1rem;
    margin-bottom:1.5rem;
}
.message .message-box .name{
margin-top:1rem;
}
.message .message-box .text{
width:100%;
margin:0 auto;
text-align:left;
}
.message:nth-of-type(3) img{
}
.message:nth-of-type(3) .message-box .text{
}

.beauty .roundlink{
width:30%;
height:30%;
    object-fit: cover;
border-radius:50%;
display:inline-block;
margin:0 1%;
}

.beauty h2,.estate h2{
text-align:center;
font-size:1.2rem;
margin:3rem auto 2rem auto;
width:90%;
}
.beauty .topmessage p,
.estate .topmessage p{
text-align:center;
font-size:1rem;
margin:0 auto 1rem auto;
width:90%;
}
.food .map{
width:100%;
height:30rem;
margin:auto;
}
.beauty img,.beauty .beauty-box,
.estate img,.estate .estate-box{
width:90%;height:auto;
vertical-align:top;
margin:1rem auto;
}
.beauty img,.estate img{
    object-fit: cover;
width:100%;height:10rem;
vertical-align:top;
margin:3rem auto;

}
.beauty .beauty-box .title,
.estate .estate-box .title{
    text-align:center;
    font-size:1rem;
    margin-bottom:1.5rem;
}
.beauty .beauty-box .title,
.estate .estate-box .title{
margin: 0 auto 2rem;
    font-size: 1.2rem;
    font-weight: bold;}
.title.comp{
margin-top:5rem;text-align:center;
font-size:1.3rem;font-weight:bold;
}
.beauty .beauty-box .text,
.estate .estate-box .text{
width:90%;
margin:0 auto;
text-align:left;
}
.beauty:nth-of-type(4) img,
.beauty:nth-of-type(6) img,
.beauty:nth-of-type(8) img,
.beauty:nth-of-type(10) img,
.beauty:nth-of-type(12) img,
.estate:nth-of-type(3) img,
.estate:nth-of-type(5) img
{
float:right;
}
.estate .s-link{
width:15rem;
height:3rem;
margin:1rem;
display:inline-block;
text-align:center;
border:brown 0.05rem solid;
text-decoration:none;
line-height:3rem;
font-size:1rem;
color:brown;
transition: all 0.5s;/*アニメーション設定*/
}
.estate .s-link:hover,
button:hover{
color:white;
background-color:brown;
}

.mission{
margin-bottom:5rem !important;
}
.mission div{
margin:3rem 5%;
}
.mission p{
font-size:1rem;
width:90%;
line-height:2rem;
margin:0 auto 1.5rem auto;
}
.mission p:nth-of-type(1){
font-size:1.5rem;
line-height:2.5rem;
font-weight:bold;
}
.inquiry-wrap{
width:90%;
line-height:2.3rem;
margin:0 auto;
}
.inquiry-wrap .wrap{
border-bottom:black 0.03rem dashed;
}
.inquiry-wrap .wrap div{
display:inline-block;
padding:0.8rem;
}
.inquiry-wrap .wrap .name{
font-size:0.9rem;
width:10rem;
vertical-align:top;
}
.inquiry-wrap .wrap .form{
width:100%;
}
.inquiry-wrap .wrap .form input,
.inquiry-wrap .wrap .form textarea,
.inquiry-wrap .wrap .form select
{
width:100%;
}
.inquiry-wrap .wrap .form select{
height:2rem;
}
.inquiry-wrap .wrap:nth-of-type(6) .form input{
}
.inquiry-wrap .wrap:nth-of-type(4) .form input{
margin-bottom:1rem;
}
.inquiry-wrap .wrap:nth-of-type(4) .form span input{
width:29%;
}
button{
width:15rem;
text-align:center;
height:3rem;
margin:0.5rem;
display:inline-block;
transition: all 0.5s;/*アニメーション設定*/
}
.s-in{
display:inline-block;
width:90%;
margin:0 auto;
vertical-align:top;
}
.s-in a{
text-decoration:none;
color:black;
}
.s-in p:nth-of-type(1){
height:3rem;
font-size:0.8rem;
line-height:1rem;
color:gray;
padding-left:1rem;
border-left:gray 0.2rem solid;
text-align:right;
}
.s-in p:nth-of-type(2){
font-size:1rem;
line-height:2rem;
font-weight:bold;
padding:0 0 0 1rem;
text-align:left;
margin:-2rem auto 2rem auto;
}
.s-in-02{
display:inline-block;
width:90%;
margin:1rem 5%;
border-top:gray 0.1rem solid;
}
.s-in-02 a{
text-decoration:none;
color:black;
}
.s-in-02 p:nth-of-type(1){
height:3rem;
font-size:0.8rem;
line-height:1rem;
color:gray;
padding:1rem;
text-align:left;
}
.s-in-02 p:nth-of-type(2){
font-size:1rem;
line-height:1rem;
font-weight:bold;
padding:0 0 0 1rem;
text-align:left;
}
.s-in-02 span.info-info:after{
content:"お知らせ";
padding: 0.2rem 1rem;
margin-left: 1rem;
width:10rem;height:1rem;line-height:1rem;
color:white;background-color:gray;
}

.s-in span.info-info:after{
content:"お知らせ";
padding-right:1rem;
}

.swiper-container{
}
.swiper-wrapper{
}
.swiper-slide{
height:18rem !important;
}
.press-slide{
width:95% !important;
height:14rem !important;
margin:0 auto;
position:relative !important;
}
.press-slide .thumbnail{
width:100% !important;
height:100% !important;
position:absolute !important;
top:0 !important;left:0 !important;
overflow:hidden;
}
.press-slide .thumbnail img{
width:100% !important;
height:100% !important;
object-fit: cover;
transition: transform .3s ease;
transform:scale(1.3);
}
.press-slide .thumbnail:hover img{
transform:scale(1.1);
}
.press-slide .textwrap{
width:90%;height:50%;
position:absolute !important;
top:80% !important;left:11% !important;
padding:1rem;
background-color:white;
color:black;
z-index:15;
}
.press-slide .date{
z-index:15;
font-size:0.8rem;
text-align:left;
}
.press-slide .title{
z-index:15;
font-size:1rem;
font-weight:bold;
text-align:left;
}
.swiper-button-prev,.swiper-button-next{
top:91% !important;
}
.swiper-button-next::after,
.swiper-button-prev::after {
  color: #fff;
  font-size: 1rem !important;
}
.swiper-button-next,
.swiper-button-prev {
  width: 2.4rem !important;
  height: 2.4rem !important;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 100%;
}

.estate-comp{
text-align:center;
margin-bottom:2rem;
}
.estate table{
width:90%;margin:1rem auto;
  border-collapse: collapse;
  border-spacing: 0;
}
.estate table td{
width:35%;
padding:0.2rem;
}
.estate table tr:nth-of-type(1) > td{
text-align:center;
font-size:1rem;
}
.estate table tr > td:nth-of-type(2){
color:blue;
font-weight:bold;
}
.estate table th,.estate table td{
border-bottom:0.05rem black solid;
line-height:2.5rem;
}

.interior .case-top{
}
.interior .case-top .number{
color:white;background-color:gray;text-align:center;
line-height:7rem;
width:7rem;height:7rem;font-size:3.5rem;
font-weight:bold;
}

.interior .case-top .case-name{
width:95%;margin:auto;text-align:left;line-height:4rem;
height:4rem;font-size:1.5rem;
}
.interior .case-top.right .case-name{text-align:left;right:auto;left:0;}

.interior span.small{
font-size:0.8rem;
}
.interior .case{
width:90%;margin:0 auto;
}
.interior .case .case-slide{
width:100%;height:auto;
position:relative;top:0;left:0;
}
.interior .case .case-slide .text{
    width: 100%;
    height: 1.7rem;
    color: white;
    background-color: black;
    position: absolute;
    bottom: 0;
    padding-left: 1rem;
    left:0;
}

.interior .case .case-slide .swiper-slide{
height:auto !important;
}
.interior .case .case-slide .swiper-slide img{
width:100% !important;
height:60vw !important;
object-fit:cover;
}

.interior .case .d-01{
width:90%;margin:1rem 0 0 5%;
}
.interior .case .d-02{
width:90%;margin:1rem 0 0 5%;
}
.interior .case .d-03{
width:100%;margin:1rem 0 4rem 0;
line-height:3rem;font-size:1.1rem;
text-align:center;color:red;
}

.foot-wrap{
font-size:1rem;line-height:1.5rem;
background-color:rgba(130,130,130,0.7);
padding:2rem 2rem 7.5rem;
margin:2rem 0 0;
width:100%;
position:relative;
text-align:center;
color:white;
}
.foot-wrap p,
.foot-wrap a{
color:white;
}
.foot-wrap img{
width:20%;height:auto;
margin:0.5rem auto 2rem;
}
.foot-wrap div{
text-align:left;
margin:0 4rem 0 0;
padding-left:1rem;
border-left:white 0.1rem solid;
}
.foot-wrap .footlink_m1rem{
padding-left:1rem;
}
a.gotop{
display:none;
}
.foot{
    text-align:center !important;
    font-size:0.8rem;
    line-height:1rem;
    color:white;
    padding-right:2rem;
    border-left:none !important;
    margin:1rem auto 0 !important;
}

.sus_02 img{
margin:1rem auto !important;
}
.sus_02 p{
font-size:1rem;
margin-bottom:2rem;
}
.suslink{
width:85%;height:7rem;position:relative;
margin:3rem auto;
}
.suslink div{
width:calc(100% - 1rem);height:6rem;position:absolute;top:0.5rem;left:0.5rem;
border:white 0.1rem solid;
}
.suslink img{
width:100%;height:100%;position:absolute;top:0;left:0;margin:0 !important;
   object-fit: cover;
}
.suslink p{
width:100%;font-size:1.5rem;color:white;font-weight:bold;text-align:center;
position:absolute;top:2.5rem;left:0;text-shadow:0 0 0.5rem black;
}

.recruit .recruit-link{
width:80%;
padding:1rem 2%;
background-color:#333;
margin: 2rem auto;
text-align: center;
font-size: 1rem;
color: #fff;
}

.recruit span{
    width: 100%;
    display: inline-block;
    text-align: center;
    border: 0.1rem solid #ccc;
    padding: 0.5rem 0;
    margin: 1rem 0;
}
.recruit p{
    width:80%;
    margin:auto;
}
.recruit.s-in-02 span{
margin:0 0 0.5rem;
}
.recruit.s-in-02 p:nth-of-type(1) {
height:auto;
}
.link01{
    background-color: #333;
    color: white;
    width: 70%;
    height: 3rem;
    line-height: 3rem;
    text-align: center;
    margin: 1rem auto;
}
.news p{
    width: 90%;
    margin: auto;
    padding-bottom: 1rem;
    font-size: 0.9rem;
    line-height: 200%;
    letter-spacing: 0.02rem;
}
.inquiry-box{
display:none;
}
.inquiry-link{
background-color:rgba(0,0,0,0.7);width:95%;height:5rem;
position:fixed;bottom:0.5rem;right:2.5%;
padding-left:0 !important;
z-index:10;
}
.inquiry-link img{
display:none !important;
}
.inquiry-link p{
width:100%;
height:100%;
text-align:center;
font-size:1.2rem;color:white;
line-height:5rem;
}
.aboutus p{
    width:90%;
    margin:0 auto 1rem;
}
.aboutus h3{
    width:90%;
    margin: 1rem auto;
    line-height: 2.5rem;
    border-bottom: 0.05rem solid black;
    text-align: center;
    font-size: 1.2rem;
}
.box1{
height:23rem;width:90%;
margin:2rem 1%;
background-color:white;
display:inline-block;
border:0.4rem solid #edb;
text-align:left;
box-shadow: 0 0 0.5rem 0 rgba(90, 30, 0, .5);
vertical-align:top;
}
.box1 img{
height:10rem;width:100%;
}
.news .box1 p{
width:80%;margin:auto;
font-size:1rem;line-height:1.5rem;
}
.news .box1 p.title{
font-size:1.4rem;font-weight:bold;
width:80%;margin:1rem auto;
padding:0 0 1rem;
border-bottom:#aaa solid 0.1rem;
text-align:center;
}

.box2-position{
position:relative;
height:62rem;
}
.box2-position .flow{
position:absolute;
bottom: 31rem;
left: -7.3rem;
width: 59rem;
height: 2.5rem;
background-color:gray;
background:url("http://www.msbox-key.com/test/images/flow-back.png");
background-size:auto 100%;
background-repeat:repeat-x;
transform: rotate(90deg) !important;
}
.box2-position .flow p{
line-height:2rem;font-weight:bold;height:2rem;font-size:1.2rem;
}
.box2-position .flow p:nth-of-type(1){
position:absolute;top:0.25rem;left:0;
width:26rem;
background-color:rgba(150,150,50,0.2);
}
.box2-position .flow p:nth-of-type(2){
position:absolute;top:0.25rem;left:26rem;
width:13rem;
background-color:rgba(50,150,50,0.2);
}
.box2-position .flow p:nth-of-type(3){
position:absolute;top:0.25rem;left:39rem;
width:20rem;
background-color:rgba(50,50,150,0.2);
}

.box2{
height:9rem;width:80%;
margin:0.5rem 0.5%;
background-color:white;
display:inline-block;
border:0.3rem solid #ccc;
padding-top:1rem;
position:relative;
}
.news .box2 p{
width:90%;margin:auto;
font-size:0.8rem;line-height:1.2rem;
}
.news .box2 p.title{
font-size:1.1rem;font-weight:bold;
width:80%;margin:2rem auto 1rem;
padding:0 0 0.5rem;
border-bottom:#aaa solid 0.1rem;
}
.news .box2 p.number{
position:absolute;
font-size:3rem;font-weight:bold;
width:80%;margin:1.5rem auto 1rem 2rem;
padding:0 0 0.5rem;text-align:left;
}
.interior{
width:90% !important;height:28.5rem;
box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, .5);
margin:2.5rem auto !important;
}
.interior.archives{
height:21.5rem;
}
.box3{
width:90%;
margin:0 1%;
background-color:#b96;
color:white;
display:inline-block;
border:0.4rem solid #fff;
text-align:left;
box-shadow: 0 0.5rem 1rem 0 rgba(90, 90, 90, .5);
vertical-align:top;
margin-bottom:2rem;
}

.box3 p{
font-size:0.8rem;line-height:1.2rem;
padding:0 1rem;width:90%;
}
.box3 p.text.last{
padding-bottom:1rem;
border-bottom:#fff dotted 0.05rem;
margin-bottom:1rem;
}
.box3 p.title{
padding:1rem;
margin-bottom:1rem;
border-bottom:#fff solid 0.1rem;
font-size:1.3rem;font-weight:bold;
text-align:center;
}
.box3 p.price1,
.box3 p.price2{
text-align:center;
}
.box3 p.price1{
font-size:0.9rem;
padding-bottom:1.5rem;
width:100%;
}
.box3 p.price2{
font-size:0.9rem;
padding-bottom:0.5rem;
}
.box3 p.price2 span{
font-size:1.2rem;font-weight:bold;
padding:0 0.2rem;
}
.box4{
height:42rem;width:90%;
margin:0 auto 3rem;
background-color:white;
display:inline-block;
border:0.5rem solid #ccc;
padding:1rem;
box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, .5);
}
.box4.strongness1{
background:linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.4)) ,url(http://www.msbox-key.com/test/images/top02_01.png);
background-size:22rem auto;
background-position:right top;
background-repeat:no-repeat;
text-align:left;
}
.box4.strongness2{
background:linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.4)) ,url(http://www.msbox-key.com/test/images/top02_02.png);
background-size:22rem auto;
background-position:right top;
background-repeat:no-repeat;
text-align:left;
}
.box4 p{
padding-bottom:0.8rem;
font-size:0.9rem;
width:98%;
margin:0 1%;
}
.box4 p.title{
padding:1.5rem 0 3rem;
font-size:1.4rem;font-weight:bold;
width:98%;
}
.case .d-01,
.case .d-02,
.case .d-03{
display:none;
}
.case-box{
text-align:center;
margin:5rem auto !important;
}
.cases{
width:42vw;height:58vw;
position:relative;
display:inline-block;
margin:2.5vw;
}
.cases .case-name{
line-height:1.5;
margin-bottom:2vw;
}
.cases img{
width:42vw;height:42vw;
object-fit:cover;
border:2.5vw solid #eee;
}

}
@media only screen and (min-width: 481px) {

.sp{
display:none;
}
.pc{
display:block;
}
/*menu*/

.menu-btn {
    position: fixed;
    top: 0.5em;
    right: 0.5em;
    display: flex;
    height: 3em;
    width: 3em;
    justify-content: center;
    align-items: center;
    z-index: 90;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 0.1em;
    width: 1.5em;
    border-radius: 1.5em;
    background-color: white;
    position: absolute;
}
.menu-btn span{
margin:0 0 0 0.1em;
}
.menu-btn span:before {
    bottom: 0.4em;
    transition: all 0.5s;/*アニメーション設定*/
}
.menu-btn span:after {
    top: 0.4em;
    transition: all 0.5s;/*アニメーション設定*/
}
#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
    background-color: rgba(255, 255, 255, 1);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
    background-color: rgba(255, 255, 255, 1);
}
#menu-btn-check {
    display: none;
}
.menu-content {
    width: 50%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 80;
    background-color: #3584bb;
}
.menu-content ul {
    padding: 3.5em 0.5em 0;
}
.menu-content ul li {
    border-bottom: solid 0.05em #ffffff;
    list-style: none;
}
.menu-content ul li p{
    color:#ffffff;
    font-size: 0.8rem;line-height:200%;
    padding: 0.5rem 0;
}
.menu-content ul li p.t02{
    font-size: 0.65rem;line-height:160%;
}
.menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 0.75em;
    box-sizing: border-box;
    color:#ffffff;
    text-decoration: none;
    padding: 0.5em 0.75em 0.5em 0;
    position: relative;
}
.menu-content ul li.language{
height:2rem;line-height:2rem;
border-bottom:none;
color:white;
font-size:0.8rem;
}
.menu-content ul li.language span{
padding:0.1rem 0.5rem;
background-color:steelblue;
cursor: pointer;
}
.menu-content ul li a::before {
    content: "";
    width: 0.35em;
    height: 0.35em;
    border-top: solid 0.1em #ffffff;
    border-right: solid 0.1em #ffffff;
    transform: rotate(45deg);
    position: absolute;
    right: 0.55em;
    top: 0.8em;
}
.menu-content {
    width: 30%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    background-color: rgba(10,65,105,0.95);
    transition: all 0.5s;/*アニメーション設定*/
}
#menu-btn-check:checked ~ .menu-content {
    left: 70%;/*メニューを画面内へ*/
}
.head{
width:100%;
height:4rem;
position:fixed;
top:0;
text-align:left;
z-index:100;
    background-color: rgba(50, 150, 200, 0.7);
}
.head-parts{
position:relative;
width:100%;height:100%;
margin:auto;
}
.head img{
position:absolute;
top:0.25rem;left:2.25rem;
height:3.5rem;width:auto;
}
.head .header-text{
font-size:1rem;
font-weight:normal;
line-height:4rem;
color:white;padding-left:4rem;
}
h2,h3{
padding:0 1rem;
margin:1rem 0;
}
.aboutus h3{
border-left:0.3rem solid gray;
}
.site-main{
overflow:hidden;
}
.entry-content{
font-size:0.8rem;
line-height:1.3rem;
}

section.articles{
width:60rem;
margin:0 auto;
position:relative;
}
.topmessage{
padding:3rem 5rem 5rem;
}
.news p{
    width: 50rem;
    margin: auto;
    padding-bottom: 1rem;
    font-size: 0.9rem;
    line-height: 200%;
    letter-spacing: 0.02rem;
}
.articles .back-right{
margin-left: calc(50% - 50vw);
background-color:#1e90ff;opacity:0.2;
width:60vw;height:18rem;
position:absolute;
z-index:-1;
margin-top:1rem;
}
.articles .back-left{
background-color:#1e90ff;opacity:0.2;
width:100vw;height:18rem;
position:absolute;
z-index:-1;
margin-top:1rem;
margin-left:5rem;
}
section.top-parts{
margin-bottom:2rem;
}
section.top-parts h2{
font-size:3.6rem;
margin:8rem 0 4rem;
color:#22a8eb;
}
.mission-box01{
width:100%;height:32rem;
}

.mission-box01.mi1{
background:linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) ,linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) ,url("http://ones-group.conohawing.com/images/top/003.jpeg");
background-size:80% auto;
    background-repeat:  no-repeat;              /* 背景の繰り返し設定 */
    background-position: right center;          /* 背景の位置指定 */
    position:relative;
}
.mission-box01 > p:nth-of-type(1){
font-weight:bold;
font-size:3.3rem;
color:#622;text-shadow:0 0 1rem white;
position:absolute;top:4rem;left:5%;
}
.mission-box01.mi1 > div{
    position:absolute;
    top: 10rem;
    left: 5%;
    width: 30rem;
    padding: 1rem 1rem 0.3rem;
    color: white;
    background-color: #332;
    opacity: 0.7;
    border: 0.1rem solid #554;
}
.mission-box01 > div p{
margin-bottom:0.7rem;
}
.mission-box01.mi2{
text-align:center;
}

.mission-box01 .right{
display:inline-block;
width:60rem;
height:32rem;
}
.mission-box01 .right a{
height:100%;width:19%;
}
.mission-box01 .right .hoverlink{
display:inline-block;
height:100%;width:19%;
margin:0 0.22%;
overflow:hidden;
position:relative;
}
.mission-box01 .right .hoverlink .caption{
color:#fff;
    transform: rotate(90deg);
padding-left: 5rem;
    padding-top: 18rem;
    width: 23rem;
    font-size: 6rem;
    font-weight: bold;
text-align:left;
}
.mission-box01 .right .hoverlink .caption span{
font-size:1.2rem;
font-weight:normal;
}

.mission-box01 .right .hoverlink .mask{
	width:			100%;
	height:			100%;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		1;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
}
.mission-box01 .right .hoverlink:hover .mask {
	opacity:		0;	/* マスクを表示する */
	padding-left:		1rem;	/* 右にずらす */
}

.mission-box01 .right img{
height:100%;width:100%;
object-fit: cover;
}
li.wp_rss_retriever_item{
    width: 11.5rem;
    height: 10rem;
    margin: 0 0.25rem;
    display: inline-block;
    position:relative;
}
.wp_rss_retriever_image{
    width: 11.5rem !important;
    height: 10rem !important;
    object-fit: cover;
    position:absolute;top:0;right:0;
    margin:0 !important;
}
.wp_rss_retriever_title{
    width: 10.7rem !important;
    height:3rem !important;
    font-size: 0.75rem;
    line-height: 1rem;
    padding-top: 0.5rem;
    padding-right:0.5rem;
    text-align: left;
    position: absolute;
    bottom: -1rem;left:0;
    background-color: rgba(255, 255, 255, 1);
    z-index:10;
    color:black;
    text-decoration:none;
}

.wp_rss_retriever_container,
.wp_rss_retriever_credits,
.wp_rss_retriever_metadata{
display:none !important;
}
.aboutus h2{
font-size:1.5rem;
margin:2.5rem;
}
.aboutus p{
padding-bottom:0.5rem;
}
.aboutus .map{
margin:2rem auto 6rem;
width:55rem;
}
.aboutus .map iframe{
width:55rem !important;
height:25rem !important;
}
h1.localpage-title{
position:absolute;
margin:8.5rem auto 0;
width:100%;
font-size:2rem;
line-height:4rem;
z-index:5;
color:#333;
text-shadow: 0 0 0.2rem #eee;
text-align:center;
}
.videowrap{
position:relative;
}
.videowrap p{
font-size:2.5rem;font-weight:bold;
line-height:3rem;
z-index:5;
color:#fff;
text-shadow: 0 0 0.2rem #aaa;
position:absolute;top:47%;text-align:center;width:100%;
}
.videowrap img.top-image{
position:absolute;top:22%;width:30%;left:35%;height:auto;
z-index:4;
filter: drop-shadow(0 0 0.2rem white);
}
.articles.news-detail{
width:50rem;
}
.articles.news-detail h1{
font-size:2rem;
margin-bottom:2rem;
}
.local-pagetop{
position:relative;
width:100%;height:21rem;
margin:0 0 5rem;
}
.local-pagetop img{
position:absolute;
max-height:21rem;
width:100%;
    object-fit: cover;
top:0;
}

.message img,.message .message-box{
display:inline-block;
width:29rem;height:29rem;
vertical-align:top;
margin:0 0 1rem 0;
}
.message .message-box .name,
.message .message-box .position{
    text-align:center;
    font-size:1rem;
    margin-bottom:1.5rem;
}
.message .message-box .name{
margin-top:1rem;
}
.message .message-box .text{
width:26rem;
margin:0 auto;
text-align:left;
}
.message:nth-of-type(3) img{
float:right;
}
.message:nth-of-type(3) .message-box .text{
line-height:1.1rem;
}

.beauty .roundlink{
width:15rem;
height:15rem;
    object-fit: cover;
border-radius:50%;
display:inline-block;
margin:0 2rem;
}

.beauty h2,.estate h2{
text-align:center;
font-size:1.4rem;
margin:6rem auto 2rem auto;
}
.beauty .topmessage p,
.estate .topmessage p{
text-align:center;
font-size:1rem;
margin-bottom:1rem;
}
.food .map{
width:50rem;
height:30rem;
margin:auto;
}
.beauty img,.beauty .beauty-box,
.estate img,.estate .estate-box{
display:inline-block;
width:26rem;height:21rem;
vertical-align:top;
margin:1rem;
}
.beauty img,.estate img{
    object-fit: cover;
width:30rem;height:21rem;
vertical-align:top;
margin:1rem 1.5rem 1rem 1.5rem;
margin-left:calc(50% - 50vw);
}
.beauty.toppage img{
margin-left:0;
width:30rem;height:18rem;

}
.beauty .beauty-box .title,
.estate .estate-box .title{
    text-align:center;
    font-size:1rem;
    margin-bottom:1.5rem;
    margin-top:1rem;
    font-weight: bold;
}
.beauty.toppage .beauty-box .title{
    margin-top: 2rem;
    font-size: 1.3rem;
    line-height:120%;
}

.beauty .beauty-box .text,
.estate .estate-box .text{
width:26rem;
margin:0 auto;
text-align:left;
}
.beauty:nth-of-type(2) img,
.beauty:nth-of-type(4) img,
.beauty:nth-of-type(6) img,
.beauty:nth-of-type(8) img,
.beauty:nth-of-type(10) img
{
float:right;
margin-left:1rem;
margin-right:calc(50% - 50vw);
}
.beauty.toppage:nth-of-type(2) img,
.beauty.toppage:nth-of-type(4) img,
.beauty.toppage:nth-of-type(6) img,
.beauty.toppage:nth-of-type(8) img,
.beauty.toppage:nth-of-type(10) img
{
margin-right:0;
}
.estate .s-link{
width:15rem;
height:3rem;
margin:1rem;
display:inline-block;
text-align:center;
border:brown 0.05rem solid;
text-decoration:none;
line-height:3rem;
font-size:1rem;
color:brown;
transition: all 0.5s;/*アニメーション設定*/
}
.estate .s-link:hover,
button:hover{
color:white;
background-color:brown;
}

.mission p{
font-size:1rem;
width:50rem;
line-height:2rem;
margin:0 auto 1.5rem auto;
}
.mission p:nth-of-type(1){
font-size:1.5rem;
line-height:2.5rem;
font-weight:bold;
margin-top:6rem;
}
.inquiry-wrap{
width:45rem;
line-height:2.3rem;
margin:0 auto;
}
.inquiry-wrap .wrap{
}
.inquiry-wrap .wrap div{
display:inline-block;
padding:0.8rem;
}
.inquiry-wrap .wrap .name{
font-size:0.9rem;
width:10rem;
vertical-align:top;
}
.inquiry-wrap .wrap .form{
width:32rem;
}
.inquiry-wrap .wrap .form input,
.inquiry-wrap .wrap .form select{
    width:100%;
    line-height: 2rem;
    padding-left: 0.5rem;
    height:2rem;
}
.inquiry-wrap .wrap .form textarea
{
    width:100%;
    line-height: 1.3rem;
    padding-top:0.35rem;
    padding-left: 0.5rem;
    height:10rem;
}
.inquiry-wrap .wrap:nth-of-type(4) .form input{
}
.inquiry-wrap .wrap:nth-of-type(4) .form span input{
width:30%;
}
button{
width:15rem;
text-align:center;
height:3rem;
margin:0.5rem;
display:inline-block;
transition: all 0.5s;/*アニメーション設定*/
}
.s-in{
display:inline-block;
width:18rem;
margin:0 0.5rem;
vertical-align:top;
}
.s-in a{
text-decoration:none;
color:black;
}
.s-in p:nth-of-type(1){
height:3rem;
font-size:0.8rem;
line-height:1rem;
color:gray;
padding-left:1rem;
border-left:gray 0.2rem solid;
text-align:right;
}
.s-in p:nth-of-type(2){
font-size:1.4rem;
line-height:2rem;
font-weight:bold;
padding:0 0 0 1rem;
text-align:left;
}
.s-in-02{
display:inline-block;
width:45rem;
margin:1rem 0.5rem;
border-top:gray 0.1rem solid;
}
.s-in-02 a{
text-decoration:none;
color:black;
}
.s-in-02 p:nth-of-type(1){
height:3rem;
font-size:0.8rem;
line-height:1rem;
color:gray;
padding:1rem;
text-align:left;
}
.s-in-02 p:nth-of-type(2){
font-size:1.4rem;
line-height:2rem;
font-weight:bold;
padding:0 0 0 1rem;
text-align:left;
}
.s-in-02 span.info-info:after{
content:"お知らせ";
padding: 0.2rem 1rem;
margin-left: 1rem;
width:10rem;height:1rem;line-height:1rem;
color:white;
}
.s-in-02 span.info-ir:after{
content:"IR情報";
padding: 0.2rem 1rem;
margin-left: 1rem;
width:10rem;height:1rem;line-height:1rem;
color:white;
}
.s-in-02 span.info-press:after{
content:"プレスリリース";
padding: 0.2rem 1rem;
margin-left: 1rem;
width:10rem;height:1rem;line-height:1rem;
color:white;
}
.s-in-02 span.info-media:after{
content:"メディア掲載";
padding: 0.2rem 1rem;
margin-left: 1rem;
width:10rem;height:1rem;line-height:1rem;
color:white;
}

.s-in span.info-info:after{
content:"お知らせ";
padding-right:1rem;
}

.swiper-container{
}
.swiper-wrapper{
}
.swiper-slide{
height:18rem !important;
}
.press-slide{
width:95% !important;
height:14rem !important;
margin:0 auto;
position:relative !important;
}
.press-slide .thumbnail{
width:100% !important;
height:100% !important;
position:absolute !important;
top:0 !important;left:0 !important;
overflow:hidden;
}
.press-slide .thumbnail img{
width:100% !important;
height:100% !important;
object-fit: cover;
transition: transform .3s ease;
transform:scale(1.3);
}
.press-slide .thumbnail:hover img{
transform:scale(1.1);
}
.press-slide .textwrap{
width:90%;height:50%;
position:absolute !important;
top:80% !important;left:11% !important;
padding:1rem;
background-color:white;
color:black;
z-index:15;
}
.press-slide .date{
z-index:15;
font-size:0.8rem;
text-align:left;
}
.press-slide .date span{
color:white;
padding:0.2rem 0.5rem;
margin-left:0.5rem;}

.s-in-02 span.info-info:after,
.press-slide .date span.info-info{
background-color:#aaa;
}
.s-in-02 span.info-press:after,
.press-slide .date span.info-press{
background-color:#dca;
}
.s-in-02 span.info-ir:after,
.press-slide .date span.info-ir{
background-color:#5dd;
}
.s-in-02 span.info-media:after,
.press-slide .date span.info-media{
background-color:#c88;
}

.press-slide .title{
z-index:15;
font-size:1rem;
font-weight:bold;
text-align:left;
}
.swiper-button-prev,.swiper-button-next{
top:91% !important;
}

.estate table{
width:90%;margin:1rem auto;
  border-collapse: collapse;
  border-spacing: 0;
}
.estate table td{
width:35%;
padding:0.2rem;
}
.estate table tr:nth-of-type(1) > td{
text-align:center;
font-size:1rem;
}
.estate table tr > td:nth-of-type(2){
color:blue;
font-weight:bold;
}
.estate table th,.estate table td{
border-bottom:0.05rem black solid;
}

.interior .case-top{
width:50rem;height:7rem;text-align:center;
position:relative;margin:7rem auto 2rem;
background-color:white;
}
.interior .case-top .number{
color:white;background-color:gray;
position:absolute;top:0;left:0;line-height:7rem;
width:7rem;height:7rem;font-size:3.5rem;
font-weight:bold;
}
.interior .case-top.right .number{left:auto;right:0;}

.interior .case-top .case-name{
text-align:right;line-height:4rem;
position:absolute;bottom:0;right:2rem;
width:35rem;height:4rem;font-size:2rem;
}
.interior .case-top.right .case-name{text-align:left;right:auto;left:2rem;}

.interior span.small{
font-size:0.8rem;
}
.interior .case{
width:50rem;height:16rem;
position:relative;margin:0 auto;
background-color:white;
}
.interior .case .case-slide{
width:16rem;height:16rem;
position:absolute;top:0;left:0;
}
.interior .case.right .case-slide{
right:0;left:auto;
}
.interior .case .case-slide .text{
    width: 100%;
    height: 1.7rem;
    color: white;
    background-color: black;
    position: absolute;
    bottom: 0;
    padding-left: 1rem;
    left:0;
}
.interior .case .case-slide img{
width:100%;
height:100%;
object-fit:cover;
}

.interior .case .case-slide .swiper-slide{
height:16rem !important;
}

.interior .case .d-01{
width:15rem;height:16rem;
background-color:white;
position:absolute;top:0;left:17rem;
}
.interior .case .d-02{
width:20rem;height:16rem;
background-color:white;
position:absolute;top:0;left:30rem;
}
.interior .case.right .d-01{
left:1rem;
}
.interior .case.right .d-02{
left:13rem;
}
.interior .case .d-03{
display:none;
}

.foot-wrap{
font-size:0.75rem;line-height:1.2rem;
background-color:rgba(0,100,180,0.7);
text-align:center;color:white;
padding:2rem;
margin:0;
width:100%;
position:relative;
}
.foot-wrap p,
.foot-wrap a{
color:white;
}
.foot-wrap img{
width:9rem;height:9rem;
display:inline-block;
vertical-align:middle;
margin:0 4rem 0 1rem;
}
.foot-wrap div{
display:inline-block;
vertical-align:top;
margin:0 4rem 0 0;
padding-left:1rem;
border-left:white 0.1rem solid;
}
.foot-wrap .footlink_m1rem{
padding-left:1rem;
}
a.gotop{
width:5rem;height:5rem;
border-radius:50%;
border:#433 0.2rem solid;
color:#433;font-size:1.3rem;line-height:4.7rem;text-align:center;
position:absolute;
top:3rem;right:3rem;
}
.foot{
    position:absolute;bottom:2rem;right:0;
    text-align:right;
    font-size:0.8rem;
    line-height:1rem;
    color:white;
    padding-right:2rem;
    border-left:none !important;
    margin:0 !important;
}

.s-in-02.sus{
border:none;
}
.s-in-02.sus p:nth-of-type(1){
font-size:1.5rem;line-height:1rem;
border-bottom:#ddd solid 0.2rem;
margin-bottom:2rem;
}
.s-in-02.sus p:nth-of-type(2){
font-size:1rem;line-height:1.5rem;
font-weight:normal;
margin-bottom:2rem;
}
.sus_02{
   display:inline-block;
   width:15rem;height:30rem;
   overflow:hidden;
   margin:1rem 0.5rem;
   position:relative;
}
.sus_02 > img:nth-of-type(1){
   position:absolute;top:21rem;left:0;
   width:15rem;height:auto;
   object-fit: cover;
   margin:0;
}
.sus_02 > img:nth-of-type(2){
   position:absolute;top:0;left:0;
   width:15rem;height:20rem;
   object-fit: cover;
   margin:0;
}
.sus_02 p{
   position:absolute;top:9rem;left:0;
   width:100%;font-size:1.5rem;font-weight:bold;
   text-shadow: black 0.1rem 0 0.5rem;
   color:white;
}
.title.comp{
margin-top:5rem;text-align:center;
font-size:1.2rem;font-weight:bold;
}
.estate-comp{
width:100%;margin-bottom:3rem;
}
.estate-comp p{
text-align:right;
}
.suslink{
width:40rem;height:10rem;position:relative;
margin:3rem auto;
}
.suslink div{
width:39rem;height:9rem;position:absolute;top:0.5rem;left:0.5rem;
border:white 0.1rem solid;
}
.suslink img{
width:100%;height:100%;position:absolute;top:0;left:0;margin:0 !important;
   object-fit: cover;
}
.suslink p{
width:100%;font-size:2rem;color:white;font-weight:bold;text-align:center;
position:absolute;top:4rem;left:0;text-shadow:0 0 0.5rem black;
}
.swiper-button-next::after,
.swiper-button-prev::after {
  color: #fff;
  font-size: 1rem !important;
}
.swiper-button-next,
.swiper-button-prev {
  width: 2.4rem !important;
  height: 2.4rem !important;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 100%;
}
.recruit-detail01,
.recruit-detail02{
display:inline-block;
width:45%;text-align:left;
vertical-align:top;
}
.recruit p{
    margin-bottom:0.5rem;
}
.recruit p.title{
    font-size: 1.4rem;
    font-weight: bold;
    width: 95%;
    line-height: 2rem;
}
.recruit-detail03{
    display: inline-block;
    width: 90.2%;
    text-align: left;
    margin: 2rem auto;
}
.recruit span{
    padding: 0.3rem 0.5rem;
    background-color: #aaa;
    color: white;
    line-height: 2rem;
    margin-right: 1rem;
}
.recruit .recruit-link{
width:25rem;
padding:0.3rem 0.5rem;
background-color:white;
border:0.3rem solid #ccc;
margin: 2rem auto;
transition: all 0.3s;
text-align: center;
font-size: 1rem;
color: #111;
}

.recruit .recruit-link:hover{
background-color:#ccc;
color:white;
}
.grayline{
width:90%;height:5rem;padding:0;
background-color:#bbb;
margin:8rem 0 -3rem auto;
}
.grayline.right{
background-color:#bbb;
margin:8rem auto -3rem 0;
}
.breadcrumbs{
position:absolute;
top:22rem;left:2rem;font-size:0.7rem;color:#aaa;z-index:10;
}
.breadcrumbs a{
color:#aaa;
}
.link01{
    background-color: #333;
    color: white;
    width: 15rem;
    height: 3rem;
    line-height: 3rem;
    text-align: center;
    margin: 2rem auto;
}
.link01:hover{
    background-color: #999;
}
.videowrap img{
width:100%;height:auto;
}

/*スクロールダウン全体の場所*/
.scrolldown2{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	top:95vh;
	left:50%;
}

/*Scrollテキストの描写*/
.scrolldown2 span{
    /*描画位置*/
	position: absolute;
	left:0.2rem;
	bottom:0.5rem;
    /*テキストの形状*/
	color: #000;
	font-size: 0.5rem;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown2:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-0.2rem;
    /*丸の形状*/
	width:0.5rem;
	height:0.5rem;
	border-radius: 50%;
	background:#000;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
	animation:
		circlemove 1.6s ease-in-out infinite,
		cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:2rem;}
     100%{bottom:-2rem;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
	100%{opacity:0;}
 }

/* 線の描写 */
.scrolldown2:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:-5vh;
	left:0;
    /*線の形状*/
	width:0.1rem;
	height: 10vh;
	background:#000;
}

.inquiry-link{
border-left:none !important;
width:12rem;height:auto;
position:fixed;bottom:0;right:0;
padding-left:0 !important;
z-index:10;
}
.inquiry-link img{
width:100%;
height:auto;
margin:0 !important;
filter: drop-shadow(0 0 0.2rem white);
}
.inquiry-link p{
display:none;
}
.tel-box{
width:12rem;height:2.5rem;
position:absolute;top: 0.75rem;right:18rem;
text-align:right;font-size:1.2rem;color:white;line-height:2.5rem;
}
.tel-box img{
width:2.7rem;height:auto;padding-right:1rem;
}
.inquiry-box{
width:13rem;height:2.5rem;
position:absolute;top: 0.75rem;
border-radius:3.5rem;
    font-size: 0.8rem;
    text-align: center;
    right: 3rem;
    background-color: white;
    line-height: 2.5rem;
    color: black;
  animation: inquiry 2s ease-out infinite;
  opacity: 1;
}
@keyframes inquiry {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}

.box1{
height:23rem;width:16rem;
margin:0 1%;
background-color:white;
display:inline-block;
border:0.4rem solid #8cf;
text-align:left;
box-shadow: 0 0 0.5rem 0 rgba(0,100,200, .5);
vertical-align:top;
}
.news .box1 p{
width:80%;margin:auto;
font-size:0.7rem;line-height:1.5rem;
}
.news .box1 p.title{
font-size:1rem;font-weight:bold;
width:80%;margin:1rem auto 0.5rem;
padding:0 0 0.5rem;text-align:center;
border-bottom:#aaa solid 0.1rem;
}

.box2-position{
position:relative;
height:17rem;
}
.box2-position .flow{
position:absolute;bottom:2rem;left:5%;
width:90%;height:1.5rem;
background-color:gray;
background:url("https://www.eighters.jp/images/flow-back.png");
background-size:auto 100%;
background-repeat:repeat-x;
}
.box2-position .flow p{
line-height:1rem;font-weight:bold;height:1rem;
}
.box2-position .flow p:nth-of-type(1){
position:absolute;top:0.25rem;left:0;
width:24rem;
background-color:rgba(150,150,50,0.2);
}
.box2-position .flow p:nth-of-type(2){
position:absolute;top:0.25rem;left:24rem;
width:10rem;
background-color:rgba(50,150,50,0.2);
}
.box2-position .flow p:nth-of-type(3){
position:absolute;top:0.25rem;left:34rem;
width:20rem;
background-color:rgba(50,50,150,0.2);
}

.box2{
height:17rem;width:9rem;
margin:0 0.5%;
background-color:white;
display:inline-block;
border:0.3rem solid #ccc;
padding-top:1rem;
}
.news .box2 p{
width:90%;margin:auto;
font-size:0.7rem;line-height:1.2rem;
}
.news .box2 p.title{
font-size:0.9rem;font-weight:bold;
width:80%;margin:2rem auto 1rem;
padding:0 0 0.5rem;
border-bottom:#aaa solid 0.1rem;
}
.news .box2 p.number{
font-size:3rem;font-weight:bold;
width:80%;margin:2rem auto 1rem;
padding:0 0 0.5rem;
}
section.articles.interior{
width:55rem !important;
height:27.5rem;
background-color:rgba(255,255,255,0.8);
box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, .5);
}
.box3{
height:15rem;width:28rem;
margin:0 1%;
background-color:#035;
border-radius:1rem;
color:white;
display:inline-block;
border:0.4rem solid #fff;
text-align:left;
box-shadow: 0 0.5rem 1rem 0 rgba(90, 90, 90, .5);
vertical-align:top;
margin-bottom:2rem;
}

.box3 p{
font-size:0.8rem;line-height:1.2rem;
padding:0 2rem;width:24rem;
}
.box3 p.text.last{
padding-bottom:1rem;
border-bottom:#fff dotted 0.05rem;
margin-bottom:1rem;
}
.box3 p.title{
padding:1rem 2rem 1rem;
margin-bottom:1rem;
border-bottom:#fff solid 0.1rem;
font-size:1.3rem;font-weight:bold;
}
.box3 p.price1,
.box3 p.price2{
text-align:center;
}
.box3 p.price2{
font-size:0.9rem;
padding-bottom:0.5rem;
}
.box3 p.price2 span{
font-size:1.2rem;font-weight:bold;
padding:0 0.2rem;
}
.box4{
height:28rem;width:58rem;
border-radius:2.5rem;
margin:0 auto 3rem;
background-color:white;
display:inline-block;
border:0.5rem solid #22a8eb;
padding:1rem;
box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, .5);
}
.box4.strongness1{
background:linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) ,url(https://www.eighters.jp/images/top02_01.png);
background-size:100% auto;
background-position:right top;
background-repeat:no-repeat;
text-align:left;
}
.box4.strongness2{
background:linear-gradient(270deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) ,url(https://www.eighters.jp/images/top02_02.png);
background-size:100% auto;
background-position:right top;
background-repeat:no-repeat;
text-align:right;
}
.box4 p{
padding-bottom:0.8rem;
font-size:0.8rem;
width:50%;
margin:0 1rem;
}
.box4.strongness2 p{
margin:0 1rem 0 auto;
}
.box4 p.title{
padding:1.5rem 0;
font-size:1.4rem;font-weight:bold;
width:90%;
}

.dis-none{
display:none;
}
.news .box1 img{
height:11rem;width:100%;
object-fit:cover;
margin:0;padding:0;
}

.case-box{
text-align:center;
margin:5rem auto !important;
}
.cases{
width:12rem;height:14rem;
position:relative;
display:inline-block;
margin:0.5rem;
}
.cases img{
width:12rem;height:12rem;
object-fit:cover;
}
.d-01 p,
.d-02 p{
        font-size: 0.6rem;
        line-height: 1.8;
        margin-left: 1rem;
}
.policy h2{
font-size:1.2rem;
width:50rem;
text-align:center;
margin:2.5rem 0;
}
.policy{
width:50rem !important;
margin:auto;
text-align:left;
}
.foot-wrap a{
margin:0 0.5rem;
}

@media only screen and (max-width: 1200px) {
html,body{
font-size:calc(100vw * calc(19 / 1200)) !important;
background:url(https://www.eighters.jp/images/bg01.jpg);
    background-size: cover; /*--背景画像のサイズ--*/
    background-attachment: fixed; /*--背景画像の固定--*/
    background-repeat: no-repeat; /*--背景画像の繰り返し--*/
    background-position: center center; /*--背景画像の位置--*/
    background-color:rgba(255,255,255,0.8);
    background-blend-mode:lighten;
}
}
@media only screen and (min-width: 1200px) {
html,body{
font-size:20px !important;
background:url(https://www.eighters.jp/images/bg01.jpg);
    background-size: cover; /*--背景画像のサイズ--*/
    background-attachment: fixed; /*--背景画像の固定--*/
    background-repeat: no-repeat; /*--背景画像の繰り返し--*/
    background-position: center center; /*--背景画像の位置--*/
    background-color:rgba(255,255,255,0.8);
    background-blend-mode:lighten;
}
}
}