@charset "UTF-8";

@media screen and (min-width:961px){
.smp{
display:none;
}
p{
font-size:14px;
line-height:1.5em;
text-align:justify;
}
.fadein{
opacity:0;
transform:translate(0,50px);
transition:all 700ms;
}
.fadein.scrollin{
opacity:1;
transform:translate(0,0);
}
.scroll{
position:relative;
}
.scroll_text{
color:#000;
font-size:18px;
text-align:center;
transform:rotate(90deg);
}
.scroll_border{
position:relative;
top:20px;
width:1px;
height:100px;
background-color:#D5D5D5;
overflow:hidden;
margin:auto;
}
.scroll_border::before{
content:"";
display:block;
position:absolute;
width:1px;
height:30px;
top:0;
left:0;
right:0;
background:#000;
animation:scrollbar 2.0s ease-in-out infinite;
margin:auto;
}
@keyframes scrollbar{
0%{
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
100%{
-webkit-transform: translateY(350%);
transform: translateY(350%);
}
}
}
@media only screen and (min-width:431px) and (max-width:960px){
.smp{
display:none;
}
.pc{
display:none;
}
.tablet{
display:block;
}
p{
font-size:13px;
line-height:1.5em;
text-align:justify;
}
.fadein{
opacity:0;
transform:translate(0,50px);
transition:all 700ms;
}
.fadein.scrollin{
opacity:1;
transform:translate(0,0);
}
.scroll{
position:relative;
}
.scroll_text{
color:#000;
font-size:16px;
text-align:center;
transform:rotate(90deg);
}
.scroll_border{
position:relative;
top:20px;
width:1px;
height:100px;
background-color:#D5D5D5;
overflow:hidden;
margin:auto;
}
.scroll_border::before{
content:"";
display:block;
position:absolute;
width:1px;
height:30px;
top:0;
left:0;
right:0;
background:#000;
animation:scrollbar 2.0s ease-in-out infinite;
margin:auto;
}
@keyframes scrollbar{
0%{
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
100%{
-webkit-transform: translateY(350%);
transform: translateY(350%);
}
}
}
@media only screen and (min-width:320px) and (max-width:430px){
.pc{
display:none;
}
p{
font-size:14px;
line-height:1.35em;
text-align:justify;
}
.fadein{
opacity:0;
transform:translate(0,50px);
transition:all 700ms;
}
.fadein.scrollin{
opacity:1;
transform:translate(0,0);
}
.scroll{
position:relative;
}
.scroll_text{
color:#000;
font-size:16px;
text-align:center;
transform:rotate(90deg);
}
.scroll_border{
position:relative;
top:20px;
width:1px;
height:100px;
background-color:#D5D5D5;
overflow:hidden;
margin:auto;
}
.scroll_border::before{
content:"";
display:block;
position:absolute;
width:1px;
height:30px;
top:0;
left:0;
right:0;
background:#000;
animation:scrollbar 2.0s ease-in-out infinite;
margin:auto;
}
@keyframes scrollbar{
0%{
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
100%{
-webkit-transform: translateY(350%);
transform: translateY(350%);
}
}
}









/*==================================================================

INDEX_AREA

==================================================================*/
@media screen and (min-width:961px){
.index_area{
width:100%;
margin:0;
padding:0;
}
.index_area dl{
width:70%;
margin:5% 15%;
}
.index_area dl dt{
width:30%;
float:left;
}
.index_area h1{
}
.index_area dl dd{
width:40%;
float:left;
margin:10% auto auto 30%;
}
.index_area dl dd ul{
}
.index_area dl dd ul li{
margin:7% 0;
}
.index_area h3{
display:none;
}







}
@media only screen and (min-width:431px) and (max-width:960px){
.index_area{
width:100%;
margin:0;
padding:0;
}
.index_area dl{
width:80%;
margin:10%;
}
.index_area dl dt{
width:30%;
float:left;
}
.index_area h1{
}
.index_area dl dd{
width:50%;
float:left;
margin:7% auto auto 20%;
}
.index_area dl dd ul{
}
.index_area dl dd ul li{
margin:7% 0;
}
.index_area h3{
display:none;
}










}
@media only screen and (min-width:320px) and (max-width:430px){
.index_area{
width:100%;
margin:0;
padding:0;
}
.index_area dl{
width:100%;
margin:15% 0%;
}
.index_area dl dt{
}
.index_area h1{
width:70%;
margin:0 15%;
}
.index_area dl dd{
width:60%;
margin:6% auto 0;
}
.index_area dl dd ul{
}
.index_area dl dd ul li{
margin:7% 0;
}
.index_area h3{
background:#C00014;
width:100%;
margin:15% 0 0;
padding:4% 0;
}
.index_area h3 img{
width:40%;
margin:0 30%;
}










}









/*==================================================================

AWARDED_AREA

==================================================================*/
@media screen and (min-width:961px){
.awarded_area{
width:100%;
margin:60px auto;
padding:100px 0 50px;
background:#C00014;
color:#FFF;
font-weight:300;
-webkit-animation:colour 10s linear infinite;
-moz-animation:colour 10s linear infinite;
}
@-webkit-keyframes colour{
0%{
background:#C00014;
}
40%{
background:#AD021B;
}
80%{
background:#960218;
}
100%{
background:#C00014;
}
}
@-moz-keyframes colour{
 0%{
background:#C00014;
}
40%{
background:#AD021B;
}
80%{
background:#960218;
}
100%{
background:#C00014;
}
}
.awarded_area div{
width:961px;
max-width:1240px;
margin:0 auto;
}
.awarded_area h2{
width:50%;
margin:0 auto 200px;
position:relative;
}
.awarded_area h2::after{
content:'';
position:absolute;
top:150px;
left:50%;
transform:translateX(-50%);
width:1px;
height:100px;
background-color:#FFF;
}
.awarded_area p{
font-size:20px;
text-align:center;
line-height:2.0em;
margin-bottom:3em;
}


}
@media only screen and (min-width:431px) and (max-width:960px){
.awarded_area{
width:100%;
margin:50px auto;
padding:80px 0 40px;
background:#C00014;
color:#FFF;
font-weight:300;
-webkit-animation:colour 10s linear infinite;
-moz-animation:colour 10s linear infinite;
}
@-webkit-keyframes colour{
0%{
background:#C00014;
}
40%{
background:#AD021B;
}
80%{
background:#960218;
}
100%{
background:#C00014;
}
}
@-moz-keyframes colour{
 0%{
background:#C00014;
}
40%{
background:#AD021B;
}
80%{
background:#960218;
}
100%{
background:#C00014;
}
}
.awarded_area div{
width:100%;
margin:0 auto;
}
.awarded_area h2{
width:50%;
margin:0 auto 180px;
position:relative;
}
.awarded_area h2::after{
content:'';
position:absolute;
top:130px;
left:50%;
transform:translateX(-50%);
width:1px;
height:100px;
background-color:#FFF;
}
.awarded_area p{
font-size:18px;
text-align:center;
line-height:2.0em;
margin-bottom:3em;
}


}
@media only screen and (min-width:320px) and (max-width:430px){
.awarded_area{
width:100%;
margin:30px auto;
padding:60px 0 30px;
background:#C00014;
color:#FFF;
font-weight:300;
-webkit-animation:colour 10s linear infinite;
-moz-animation:colour 10s linear infinite;
}
@-webkit-keyframes colour{
0%{
background:#C00014;
}
40%{
background:#AD021B;
}
80%{
background:#960218;
}
100%{
background:#C00014;
}
}
@-moz-keyframes colour{
 0%{
background:#C00014;
}
40%{
background:#AD021B;
}
80%{
background:#960218;
}
100%{
background:#C00014;
}
}
.awarded_area div{
width:100%;
margin:0 auto;
}
.awarded_area h2{
width:60%;
margin:0 auto 130px;
position:relative;
}
.awarded_area h2::after{
content:'';
position:absolute;
top:80px;
left:50%;
transform:translateX(-50%);
width:1px;
height:80px;
background-color:#FFF;
}
.awarded_area p{
font-size:16px;
text-align:center;
line-height:2.0em;
margin-bottom:3em;
}




}









/*==================================================================

AWARDS_AREA

==================================================================*/
@media screen and (min-width:961px){
.awards_area{
width:100%;
margin:100px auto;
padding:0;
}
.awards_area h2{
position:relative;
padding-bottom:80px;
font-size:28px;
text-align:center;
margin-bottom:30px;
}
.awards_area h2::before{
font-family: "Sree Krushnadevaraya", serif;
content:attr(data-en);
display:block;
color:#C00014;
font-size:26px;
margin-bottom:1.5em;
}
.awards_area h2::after{
content:'';
position:absolute;
bottom:0;
left:50%;
transform:translate(-50%) rotate(30deg);
width:1px;
height:50px;
background-color:#C00014;
}



}
@media only screen and (min-width:431px) and (max-width:960px){
.awards_area{
width:100%;
margin:80px auto;
padding:0;
}
.awards_area h2{
position:relative;
padding-bottom:60px;
font-size:25px;
text-align:center;
margin-bottom:30px;
}
.awards_area h2::before{
font-family: "Sree Krushnadevaraya", serif;
content:attr(data-en);
display:block;
color:#C00014;
font-size:23px;
margin-bottom:1.5em;
}
.awards_area h2::after{
content:'';
position:absolute;
bottom:0;
left:50%;
transform:translate(-50%) rotate(30deg);
width:1px;
height:40px;
background-color:#C00014;
}



}
@media only screen and (min-width:320px) and (max-width:430px){
.awards_area{
width:100%;
margin:60px auto;
padding:0;
}
.awards_area h2{
position:relative;
padding-bottom:55px;
font-size:22px;
text-align:center;
margin-bottom:20px;
}
.awards_area h2::before{
font-family: "Sree Krushnadevaraya", serif;
content:attr(data-en);
display:block;
color:#C00014;
font-size:21px;
margin-bottom:1.3em;
}
.awards_area h2::after{
content:'';
position:absolute;
bottom:0;
left:50%;
transform:translate(-50%) rotate(30deg);
width:1px;
height:40px;
background-color:#C00014;
}




}









/*==================================================================

MODELHOUSE_AREA

==================================================================*/
@media screen and (min-width:961px){
.modelhouse_area{
width:961px;
max-width:1240px;
margin:100px auto;
padding:0;
}
.modelhouse_area h2{
position:relative;
padding-bottom:80px;
font-size:28px;
text-align:center;
margin-bottom:30px;
}
.modelhouse_area h2::before{
font-family: "Sree Krushnadevaraya", serif;
content:attr(data-en);
display:block;
color:#C00014;
font-size:26px;
margin-bottom:1.5em;
}
.modelhouse_area h2::after{
content:'';
position:absolute;
bottom:0;
left:50%;
transform:translate(-50%) rotate(30deg);
width:1px;
height:50px;
background-color:#C00014;
}
.modelhouse_area h3{
font-size:26px;
line-height:1.5em;
text-align:center;
margin-bottom:2.5em;
position:relative;
padding-bottom:0.5rem;
border-bottom:1px solid currentColor;
}
.modelhouse_area h3::before{
content:'';
position:absolute;
top:100%;
left:50%;
transform:translateX(-50%) skew(-25deg);
height:15px;
width:15px;
border-right:1px solid currentColor;
background-color:#FFF !important;
border-left:none;
border-top:unset;
border-bottom:unset;
}
.modelhouse_area p{
font-size:18px;
text-align:center;
line-height:2em;
margin-bottom:50px;
}
.modelhouse_area ul{
}
.modelhouse_area ul li{
width:48%;
margin:0;
padding:4% 1%;
float:left;
text-align:center;
}
.modelhouse_area ul li h5{
font-size:28px;
letter-spacing:0.1em;
position:relative;
padding-top:1.2em;
}
.modelhouse_area ul li h5::before{
content:'';
position:absolute;
bottom:60px;
left:50%;
transform:translateX(-50%);
width:100px;
height:1px;
background-color:#C00014;
}
.modelhouse_area ul li h6{
font-size:16px;
margin:1em 0 1.5em;
}
.location{
width:80%;
margin:0 10% 20px;
padding:0.1em 0;
position:relative;
top:0;
}
.location::before{
content:'';
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background-color:#C00014;
z-index:-1;
transform:skewX(20deg);
}
.location h4{
position:relative;
font-size:16px;
letter-spacing:0.1em;
margin:0.5em 0;
z-index:1;
color:#FFF;
}
.modelhouse{
box-shadow:0px 10px 10px -5px #999;
}
button{
font-family:"Zen Old Mincho", serif;
font-weight:400;
font-size:20px;
position:relative;
display:inline-block;
cursor:pointer;
outline:none;
border:0;
vertical-align:middle;
text-decoration:none;
background:transparent;
padding:0;
}
button.more{
width:17em;
height:auto;
}
button.more .circle{
transition:all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position:relative;
display:block;
margin:15px 0 0;
width:3rem;
height:3rem;
background:#C00014;
border-radius:1.625rem;
}
button.more .circle .icon{
transition:all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position:absolute;
top:0;
bottom:0;
margin:auto;
background:#FFF;
}
button.more .circle .icon.arrow{
transition:all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
left:0.625rem;
width:1.125rem;
height:0.125rem;
background:none;
}
button.more .circle .icon.arrow::before{
position:absolute;
content:"";
top:-0.29rem;
right:0.0625rem;
width:0.625rem;
height:0.625rem;
border-top:0.125rem solid #FFF;
border-right:0.125rem solid #FFF;
transform:rotate(45deg);
}
button.more .more_text{
transition:all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
padding:0.8rem 0;
margin:0 0 0 1.85rem;
color:#000;
line-height:2.6;
text-align:center;
text-transform:uppercase;
}
button:hover .circle{
width:100%;
}
button:hover .circle .icon.arrow{
background:#FFF;
transform:translate(1rem, 0);
}
button:hover .more_text{
color:#FFF;
}
.modelhouse_index{
vertical-align:middle; 
padding:50px 0 0;
text-align:center;
}
a.modelhouse_index_button{
font-size:18px;
display:inline-block;
width:350px;
text-align:center;
text-decoration:none;
line-height:60px;
color:#FFF;
background-color:#C00014;
}
a.modelhouse_index_button:hover{
background-position:right center;
background-size:200% auto;
-webkit-animation:pulse 2s infinite;
animation:ripple 1.5s infinite;
color:#FFF;
}
@keyframes ripple{
0%{box-shadow:0 0 0 0 #C00014;}
70%{box-shadow:0 0 0 10px rgb(192 0 20 / 0%);}
100%{box-shadow:0 0 0 0 rgb(192 0 20 / 0%);}
}






}
@media only screen and (min-width:431px) and (max-width:960px){
.modelhouse_area{
width:98%;
margin:80px auto;
padding:0;
}
.modelhouse_area h2{
position:relative;
padding-bottom:60px;
font-size:25px;
text-align:center;
margin-bottom:30px;
}
.modelhouse_area h2::before{
font-family: "Sree Krushnadevaraya", serif;
content:attr(data-en);
display:block;
color:#C00014;
font-size:23px;
margin-bottom:1.5em;
}
.modelhouse_area h2::after{
content:'';
position:absolute;
bottom:0;
left:50%;
transform:translate(-50%) rotate(30deg);
width:1px;
height:40px;
background-color:#C00014;
}
.modelhouse_area h3{
font-size:24px;
line-height:1.5em;
text-align:center;
margin-bottom:2em;
position:relative;
padding-bottom:0.5rem;
border-bottom:1px solid currentColor;
}
.modelhouse_area h3::before{
content:'';
position:absolute;
top:100%;
left:50%;
transform:translateX(-50%) skew(-25deg);
height:15px;
width:15px;
border-right:1px solid currentColor;
background-color:#FFF !important;
border-left:none;
border-top:unset;
border-bottom:unset;
}
.modelhouse_area p{
font-size:16px;
text-align:center;
line-height:2em;
margin-bottom:40px;
}
.modelhouse_area ul{
}
.modelhouse_area ul li{
width:48%;
margin:0;
padding:5% 1%;
float:left;
text-align:center;
}
.modelhouse_area ul li h5{
font-size:24px;
letter-spacing:0.1em;
position:relative;
padding-top:1.2em;
}
.modelhouse_area ul li h5::before{
content:'';
position:absolute;
bottom:60px;
left:50%;
transform:translateX(-50%);
width:100px;
height:1px;
background-color:#C00014;
}
.modelhouse_area ul li h6{
font-size:14px;
margin:1em 0 1.5em;
}
.location{
width:80%;
margin:0 10% 20px;
padding:0.1em 0;
position:relative;
top:0;
}
.location::before{
content:'';
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background-color:#C00014;
z-index:-1;
transform:skewX(20deg);
}
.location h4{
position:relative;
font-size:14px;
letter-spacing:0.1em;
margin:0.5em 0;
z-index:1;
color:#FFF;
}
.modelhouse{
box-shadow:0px 10px 10px -5px #999;
}
button{
font-family:"Zen Old Mincho", serif;
font-weight:400;
font-size:16px;
position:relative;
display:inline-block;
cursor:pointer;
outline:none;
border:0;
vertical-align:middle;
text-decoration:none;
background:transparent;
padding:0;
}
button.more{
width:17em;
height:auto;
}
button.more .circle{
transition:all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position:relative;
display:block;
margin:15px 0 0;
width:2.4rem;
height:2.4rem;
background:#C00014;
border-radius:1.625rem;
}
button.more .circle .icon{
transition:all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position:absolute;
top:0;
bottom:0;
margin:auto;
background:#FFF;
}
button.more .circle .icon.arrow{
transition:all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
left:0.425rem;
width:1.125rem;
height:0.125rem;
background:none;
}
button.more .circle .icon.arrow::before{
position:absolute;
content:"";
top:-0.29rem;
right:0.0625rem;
width:0.625rem;
height:0.625rem;
border-top:0.125rem solid #FFF;
border-right:0.125rem solid #FFF;
transform:rotate(45deg);
}
button.more .more_text{
transition:all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
padding:0.9rem 0;
margin:0 0 0 1.85rem;
color:#000;
line-height:2.6;
text-align:center;
text-transform:uppercase;
}
button:hover .circle{
width:100%;
}
button:hover .circle .icon.arrow{
background:#FFF;
transform:translate(1rem, 0);
}
button:hover .more_text{
color:#FFF;
}
.modelhouse_index{
vertical-align:middle; 
padding:50px 0 0;
text-align:center;
}
a.modelhouse_index_button{
font-size:16px;
display:inline-block;
width:300px;
text-align:center;
text-decoration:none;
line-height:60px;
color:#FFF;
background-color:#C00014;
}
a.modelhouse_index_button:hover{
background-position:right center;
background-size:200% auto;
-webkit-animation:pulse 2s infinite;
animation:ripple 1.5s infinite;
color:#FFF;
}
@keyframes ripple{
0%{box-shadow:0 0 0 0 #C00014;}
70%{box-shadow:0 0 0 10px rgb(192 0 20 / 0%);}
100%{box-shadow:0 0 0 0 rgb(192 0 20 / 0%);}
}







}
@media only screen and (min-width:320px) and (max-width:430px){
.modelhouse_area{
width:98%;
margin:60px auto;
padding:0;
}
.modelhouse_area h2{
position:relative;
padding-bottom:55px;
font-size:22px;
text-align:center;
margin-bottom:20px;
}
.modelhouse_area h2::before{
font-family: "Sree Krushnadevaraya", serif;
content:attr(data-en);
display:block;
color:#C00014;
font-size:21px;
margin-bottom:1.3em;
}
.modelhouse_area h2::after{
content:'';
position:absolute;
bottom:0;
left:50%;
transform:translate(-50%) rotate(30deg);
width:1px;
height:40px;
background-color:#C00014;
}
.modelhouse_area h3{
font-size:21px;
line-height:1.5em;
text-align:center;
margin-bottom:2em;
position:relative;
padding-bottom:0.5rem;
border-bottom:1px solid currentColor;
}
.modelhouse_area h3::before{
content:'';
position:absolute;
top:100%;
left:50%;
transform:translateX(-50%) skew(-25deg);
height:15px;
width:15px;
border-right:1px solid currentColor;
background-color:#FFF !important;
border-left:none;
border-top:unset;
border-bottom:unset;
}
.modelhouse_area p{
font-size:16px;
text-align:center;
line-height:1.8em;
margin-bottom:30px;
}
.modelhouse_area ul{
}
.modelhouse_area ul li{
width:94%;
margin:0 3%;
padding:7% 3%;
text-align:center;
}
.modelhouse_area ul li h5{
font-size:24px;
letter-spacing:0.1em;
position:relative;
padding-top:1.2em;
}
.modelhouse_area ul li h5::before{
content:'';
position:absolute;
bottom:50px;
left:50%;
transform:translateX(-50%);
width:80px;
height:1px;
background-color:#C00014;
}
.modelhouse_area ul li h6{
font-size:14px;
margin:1em 0 1.5em;
}
.location{
width:80%;
margin:0 10% 20px;
padding:0.1em 0;
position:relative;
top:0;
}
.location::before{
content:'';
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background-color:#C00014;
z-index:-1;
transform:skewX(20deg);
}
.location h4{
position:relative;
font-size:14px;
letter-spacing:0.1em;
margin:0.5em 0;
z-index:1;
color:#FFF;
}
.modelhouse{
box-shadow:0px 10px 10px -5px #999;
}
button{
font-family:"Zen Old Mincho", serif;
font-weight:400;
font-size:16px;
position:relative;
display:inline-block;
cursor:pointer;
outline:none;
border:0;
vertical-align:middle;
text-decoration:none;
background:transparent;
padding:0;
}
button.more{
width:17em;
height:auto;
}
button.more .circle{
transition:all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position:relative;
display:block;
margin:15px 0 0;
width:2.4rem;
height:2.4rem;
background:#C00014;
border-radius:1.625rem;
}
button.more .circle .icon{
transition:all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position:absolute;
top:0;
bottom:0;
margin:auto;
background:#FFF;
}
button.more .circle .icon.arrow{
transition:all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
left:0.425rem;
width:1.125rem;
height:0.125rem;
background:none;
}
button.more .circle .icon.arrow::before{
position:absolute;
content:"";
top:-0.29rem;
right:0.0625rem;
width:0.625rem;
height:0.625rem;
border-top:0.125rem solid #FFF;
border-right:0.125rem solid #FFF;
transform:rotate(45deg);
}
button.more .more_text{
transition:all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
padding:0.9rem 0;
margin:0 0 0 1.85rem;
color:#000;
line-height:2.6;
text-align:center;
text-transform:uppercase;
}
button:hover .circle{
width:100%;
}
button:hover .circle .icon.arrow{
background:#FFF;
transform:translate(1rem, 0);
}
button:hover .more_text{
color:#FFF;
}
.modelhouse_index{
vertical-align:middle; 
padding:30px 0 0;
text-align:center;
}
a.modelhouse_index_button{
font-size:16px;
display:inline-block;
width:80%;
text-align:center;
text-decoration:none;
line-height:60px;
color:#FFF;
background-color:#C00014;
}
a.modelhouse_index_button:hover{
background-position:right center;
background-size:200% auto;
-webkit-animation:pulse 2s infinite;
animation:ripple 1.5s infinite;
color:#FFF;
}
@keyframes ripple{
0%{box-shadow:0 0 0 0 #C00014;}
70%{box-shadow:0 0 0 10px rgb(192 0 20 / 0%);}
100%{box-shadow:0 0 0 0 rgb(192 0 20 / 0%);}
}




}









/*==================================================================

ABOUT_AREA

==================================================================*/
@media screen and (min-width:961px){
.about_area{
width:max(1000px, 961px);
margin:80px auto;
padding:0;
background:#FFF;
}
.about_area div{
border:1px solid #999;
padding:40px;
}
.about_area img{
width:25%;
float:left;
border-right:1px solid #999;
padding-right:15px;
margin-right:30px;
}
.about_area h3{
font-size:18px;
font-weight:600;
text-align:left;
margin-bottom:0.8em;
}






}
@media only screen and (min-width:431px) and (max-width:961px){
.about_area{
width:98%;
margin:60px auto;
padding:0;
background:#FFF;
}
.about_area div{
border:1px solid #999;
padding:30px 20px;
}
.about_area img{
width:30%;
float:left;
border-right:1px solid #999;
padding-right:15px;
margin-right:30px;
}
.about_area h3{
font-size:15px;
font-weight:600;
text-align:left;
margin-bottom:0.5em;
}






}
@media only screen and (min-width:320px) and (max-width:430px){
.about_area{
width:98%;
margin:50px auto;
padding:0;
background:#FFF;
}
.about_area div{
border:1px solid #999;
padding:20px;
}
.about_area img{
width:50%;
border-bottom:1px solid #999;
padding-bottom:15px;
margin:0 25% 30px;
}
.about_area h3{
font-size:16px;
font-weight:bold;
margin-bottom:0.5em;
}





}









/*==================================================================

REASON_AREA

==================================================================*/
@media screen and (min-width:961px){
.reason_bg{
width:100%;
margin:60px auto;
padding:20px;
-webkit-animation:colour 10s linear infinite;
-moz-animation:colour 10s linear infinite;  
}
.reason_area{
width:1000px;
margin:60px auto;
padding:60px;
background:#FCFAF7;
}
.reason_area h3{
width:70%;
margin:20px auto 80px;
}
.reason_area h4{
font-size:28px;
font-weight:700;
text-align:center;
margin-bottom:2em;
}
.reason_area p{
font-size:15px;
}
.reason_area p span{
font-weight:900;
}
.reason_area ol{
list-style-type:none;
padding:1em;
border:4px solid #C00014;
counter-reset:li;
width:52%;
margin:30px auto;
background:#FFF;
}
.reason_area ol li{
font-size:17px;
font-weight:bold;
display:flex;
align-items:center;
padding:.3em;
}
.reason_area ol li::before{
display:inline-block;
min-width:1.7em;
margin-right:15px;
border-radius:50%;
background-color:#C00014;
color:#FFF;
font-size:.75em;
line-height:1.7em;
text-align:center;
content:counter(li);
counter-increment:li;
}





}
@media only screen and (min-width:431px) and (max-width:961px){
.reason_bg{
width:100%;
margin:60px auto;
padding:20px;
-webkit-animation:colour 10s linear infinite;
-moz-animation:colour 10s linear infinite;  
}
.reason_area{
width:98%;
margin:50px auto;
padding:40px;
background:#FCFAF7;
}
.reason_area h3{
width:80%;
margin:20px auto 80px;
}
.reason_area h4{
font-size:24px;
font-weight:700;
text-align:center;
margin-bottom:2em;
}
.reason_area p{
font-size:14px;
}
.reason_area p span{
font-weight:900;
}
.reason_area ol{
list-style-type:none;
padding:1em;
border:4px solid #C00014;
counter-reset:li;
width:66%;
margin:30px auto;
background:#FFF;
}
.reason_area ol li{
font-size:15px;
font-weight:bold;
display:flex;
align-items:center;
padding:.3em;
}
.reason_area ol li::before{
display:inline-block;
min-width:1.7em;
margin-right:15px;
border-radius:50%;
background-color:#C00014;
color:#FFF;
font-size:.75em;
line-height:1.7em;
text-align:center;
content:counter(li);
counter-increment:li;
}





}
@media only screen and (min-width:320px) and (max-width:430px){
.reason_bg{
width:100%;
margin:60px auto;
padding:20px;
-webkit-animation:colour 10s linear infinite;
-moz-animation:colour 10s linear infinite;  
}
.reason_area{
width:98%;
margin:30px auto;
padding:20px;
background:#FCFAF7;
}
.reason_area h3{
width:100%;
margin:20px auto 40px;
}
.reason_area h4{
font-size:18px;
font-weight:700;
text-align:center;
margin-bottom:2em;
line-height:1.3em;
}
.reason_area p{
font-size:14px;
}
.reason_area p span{
font-weight:900;
}
.reason_area ol{
list-style-type:none;
padding:1em;
border:4px solid #C00014;
counter-reset:li;
width:100%;
margin:30px auto;
background:#FFF;
}
.reason_area ol li{
font-size:15px;
font-weight:bold;
display:flex;
align-items:center;
padding:.3em;
text-align:left;
}
.reason_area ol li::before{
display:inline-block;
min-width:2em;
margin-right:15px;
border-radius:50%;
background-color:#C00014;
color:#FFF;
font-size:0.85em;
line-height:2em;
text-align:center;
content:counter(li);
counter-increment:li;
}





}









/*==================================================================

VALUE_AREA

==================================================================*/
@media screen and (min-width:961px){
.value_area{
width:1000px;
margin:100px auto;
padding:0;
}
.value_area h4{
font-size:28px;
font-weight:700;
text-align:center;
margin-bottom:3em;
}
.value_area h5{
font-size:16px;
text-align:center;
}
.value_area h6{
width:50%;
margin:30px auto 0;
}
.value_area p{
font-size:0.85em;
text-align:center;
color:#898989;
margin:1em auto 2em;
}





}
@media only screen and (min-width:431px) and (max-width:961px){
.value_area{
width:98%;
margin:80px auto;
padding:0;
}
.value_area h4{
font-size:24px;
font-weight:700;
text-align:center;
margin-bottom:2em;
}
.value_area h5{
font-size:16px;
text-align:center;
}
.value_area h6{
width:50%;
margin:30px auto 0;
}
.value_area p{
font-size:0.8em;
text-align:center;
color:#898989;
margin:1em auto 2em;
}








}
@media only screen and (min-width:320px) and (max-width:430px){
.value_area{
width:98%;
margin:30px auto;
padding:0;
}
.value_area h4{
font-size:18px;
font-weight:700;
text-align:center;
margin-bottom:2em;
line-height:1.3em;
}
.value_area h5{
font-size:16px;
text-align:center;
line-height:1.4em;
}
.value_area h6{
width:74%;
margin:30px auto 0;
}
.value_area p{
font-size:0.75em;
text-align:center;
color:#898989;
margin:0.8em auto 3em;
}




}









/*==================================================================

FOOTER

==================================================================*/
@media screen and (min-width:961px){
footer{
width:100%;
background:#3E3A39;
padding:50px 0 150px;
}
footer h2{
width:150px;
margin:0 auto;
}
footer p{
font-size:13px;
font-weight:300;
letter-spacing:0.1em;
text-align:center;
color:#FFF;
margin-top:1.5em;
}
footer ul{
width:200px;
height:auto;
position:fixed;
top:auto;
right:0;
bottom:10%;
left:auto;
z-index:2000;
}
footer ul li{
margin:15px 0 15px auto;
}
footer ol{
display:none;
}
.reserve{
text-align:center;
margin:30px auto 0;
position:fixed;
left:50%;
transform:translateX(-50%);
-webkit-transform:translateX(-50%);
-ms-transform:translateX(-50%);
bottom:2%;
width:40em;
}
.reserve p{
margin-bottom:5px;
font-size:18px;
font-weight:600;
color:#FFF;
letter-spacing:0.04rem;
display:inline-block;
position:relative;
text-shadow:0 0 5px #AAA;
}
.reserve p:before, .reserve p:after{
display:inline-block;
position:absolute;
top:45%;
width:20px;
height:1px;
background-color:#FFF;
content:"";
box-shadow:0 0 5px #AAA;
}
.reserve p:before{
left:-30px;
-webkit-transform:rotate(50deg);
transform:rotate(50deg);
}
.reserve p:after{
right:-30px;
-webkit-transform:rotate(-50deg);
transform:rotate(-50deg);
}
.reserve a{
position:relative;
display:flex;
justify-content:space-around;
align-items:center;
margin:0 auto;
padding:1em 0;
color:#FFF;
transition:0.3s ease-in-out;
font-size:20px;
font-weight:600;
background:#C00014;
border-radius:5px;
text-decoration:none;
}
.reserve a:hover{
transform:translateY(-2px);
box-shadow:0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
}




}
@media only screen and (min-width:431px) and (max-width:961px){
footer{
width:100%;
background:#3E3A39;
padding:35px 0 130px;
}
footer h2{
width:16%;
margin:0 auto;
}
footer p{
font-size:12px;
font-weight:300;
letter-spacing:0.1em;
text-align:center;
color:#FFF;
margin-top:1.5em;
}
footer ul{
padding:5px 0 5px 10px;
width:160px;
height:auto;
position:fixed;
top:auto;
right:0;
bottom:5%;
left:auto;
z-index:2000;
}
footer ul li{
margin:10px 0 10px auto;
}
footer ol{
display:none;
}
.reserve{
text-align:center;
margin:30px auto 0;
position:fixed;
left:50%;
transform:translateX(-50%);
-webkit-transform:translateX(-50%);
-ms-transform:translateX(-50%);
bottom:2%;
width:30em;
}
.reserve p{
margin-bottom:5px;
font-size:15px;
font-weight:600;
color:#FFF;
letter-spacing:0.04rem;
display:inline-block;
position:relative;
text-shadow:0 0 5px #AAA;
}
.reserve p:before, .reserve p:after{
display:inline-block;
position:absolute;
top:45%;
width:20px;
height:1px;
background-color:#FFF;
content:"";
box-shadow:0 0 5px #AAA;
}
.reserve p:before{
left:-30px;
-webkit-transform:rotate(50deg);
transform:rotate(50deg);
}
.reserve p:after{
right:-30px;
-webkit-transform:rotate(-50deg);
transform:rotate(-50deg);
}
.reserve a{
position:relative;
display:flex;
justify-content:space-around;
align-items:center;
margin:0 auto;
padding:1em 0;
color:#FFF;
transition:0.3s ease-in-out;
font-size:16px;
font-weight:600;
background:#C00014;
border-radius:5px;
text-decoration:none;
}
.reserve a:hover{
transform:translateY(-2px);
box-shadow:0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
}







}
@media only screen and (min-width:320px) and (max-width:430px){
footer{
width:100%;
background:#3E3A39;
padding:15px 0 100px;
}
footer h2{
width:26%;
margin:0 auto;
}
footer p{
font-size:12px;
font-weight:300;
letter-spacing:0.1em;
text-align:center;
color:#FFF;
margin-top:1.5em;
}
footer ul{
display:none;
}
footer ol{
background:rgba(62,58,57,0.8);
width:100%;
position:fixed;
top:auto;
right:0;
bottom:0;
left:0;
z-index:2000;
padding:3% 2%;
}
footer ol li{
width:46%;
margin:0 27%;
float:left;
}
.reserve{
text-align:center;
margin:30px auto 0;
position:fixed;
left:50%;
transform:translateX(-50%);
-webkit-transform:translateX(-50%);
-ms-transform:translateX(-50%);
bottom:1%;
width:80%;
}
.reserve p{
margin-bottom:5px;
font-size:15px;
font-weight:600;
color:#FFF;
letter-spacing:0.04rem;
display:inline-block;
position:relative;
text-shadow:0 0 5px #AAA;
}
.reserve p:before, .reserve p:after{
display:inline-block;
position:absolute;
top:45%;
width:20px;
height:1px;
background-color:#FFF;
content:"";
box-shadow:0 0 5px #AAA;
}
.reserve p:before{
left:-30px;
-webkit-transform:rotate(50deg);
transform:rotate(50deg);
}
.reserve p:after{
right:-30px;
-webkit-transform:rotate(-50deg);
transform:rotate(-50deg);
}
.reserve a{
position:relative;
display:flex;
justify-content:space-around;
align-items:center;
margin:0 auto;
padding:0.5em 0;
color:#FFF;
transition:0.3s ease-in-out;
font-size:16px;
font-weight:600;
background:#C00014;
border-radius:5px;
text-decoration:none;
}
.reserve a:hover{
transform:translateY(-2px);
box-shadow:0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
}





}









/*==================================================================

XXX_AREA

==================================================================*/
@media screen and (min-width:961px){
.index_area{
width:100%;
margin:60px auto;
padding:0;
}



}
@media only screen and (min-width:431px) and (max-width:960px){
.index_area{
width:100%;
margin:50px auto;
padding:0;
}



}
@media only screen and (min-width:320px) and (max-width:430px){
.index_area{
width:100%;
margin:30px auto;
padding:0;
}




}