@charset "UTF-8";
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http: //richclarkdesign.com
Twitter: @rich_clark
*/
@import url("https://fonts.googleapis.com/css2?family=Cantarell:wght@700&family=Oswald:wght@400;500;700&display=swap");
*,
*::before,
*::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-variant-ligatures: none;
font-variant-ligatures: none;
-webkit-text-size-adjust: 100%;
}
html {
overflow-y: scroll;
}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
text-decoration: none;
color: #000;
}
/* change colours to suit your needs */
ins {
background-color: #ff9;
color: #000;
text-decoration: none;
}
/* change colours to suit your needs */
mark {
background-color: #ff9;
color: #000;
font-style: italic;
font-weight: bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* change border colour to suit your needs */
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #cccccc;
margin: 1em 0;
padding: 0;
}
input, select {
vertical-align: middle;
}
main {
display: block;
}
img {
vertical-align: bottom;
max-width: 100%;
}
img[src$=".svg"] {
display: block;
width: 100%;
height: auto;
-ms-flex-negative: 0;
flex-shrink: 0;
}
/* FONT
***************************************************************/
/* 会社概要リンクリスト
***************************************************************/
.companyMenuBox {
padding-top: 74px;
}
.companyMenuList {
width: 1200px;
margin: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.companyMenuList li {
width: calc(100% / 6);
}
.companyMenuList li a {
display: block;
font-size: 15px;
letter-spacing: 0.1em;
font-weight: 500;
text-align: center;
padding-bottom: 15px;
position: relative;
}
.companyMenuList li a::before {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 3px;
background: #335167;
}
.companyMenuList li.ls0 a {
letter-spacing: 0;
}
@media all and (min-width: 681px) {
.companyMenuList li.act a::before {
width: 100%;
}
.companyMenuList li a::before {
-webkit-transition: right 0.3s, left 0.3s, width 0.3s;
transition: right 0.3s, left 0.3s, width 0.3s;
}
.companyMenuList li a:hover::before {
right: auto;
left: 0;
width: 100%;
}
}
@media all and (max-width: 680px) {
.companyMenuBox {
padding-top: 0;
}
.companyMenuList {
width: 100%;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
border-top: 1px solid #DEDEDE;
}
.companyMenuList li {
width: calc(100% / 2);
height: 50px;
border-bottom: 1px solid #DEDEDE;
}
.companyMenuList li:nth-child(odd) {
border-right: 1px solid #DEDEDE;
}
.companyMenuList li.act {
background: #335167;
}
.companyMenuList li.act a {
color: #fff;
}
.companyMenuList li.act a::before {
content: none;
}
.companyMenuList li a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 100%;
font-size: 14px;
line-height: 1.3;
padding-bottom: 0;
}
.companyMenuList li a::before {
content: '';
position: absolute;
bottom: auto;
right: 7px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
width: 7px;
height: 7px;
background: none;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
}
/* 会社概要リンクリスト
***************************************************************/
/* 共通タイトル
***************************************************************/
.profileTitle {
font-size:230%;
font-family: 'Yu Gothic UI Semibold';
letter-spacing: 0.3em;
font-weight: 500;
color: #f5f5f5;
text-align: center;
margin-bottom: 60px;
/* border-bottom: 1px solid #ccc;*/
width:500px;
margin:0 auto 2% auto;
position: relative;
/*padding: 1rem 2rem calc(1rem + 10px);*/
padding:calc(0.1rem + 5px) 2rem 0.8rem ;
background: #708090;
}
.profileTitle:before {
position: absolute;
top: -7px;
left: -7px;
width: 100%;
height: 100%;
content: '';
border: 3px solid #000;
}
.profileTitle span {
display: inline-block;
padding-bottom: 19px;
position: relative;
}
/*.profileTitle span::before {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 3px;
background: #335167;
}*/
.profileTitle2 {
font-size:160%;
font-family: 'Yu Gothic UI Semibold';
letter-spacing: 0.3em;
font-weight: 500;
width:1100px;
margin:0 auto;
text-align: center;
line-height:2;
}
/* 共通タイトル
***************************************************************/
/* 共通タイトルsp
***************************************************************/
@media all and (max-width: 680px) {
.profileTitle {
font-size: 140%;
font-family: 'Yu Gothic UI Semibold';
letter-spacing: 0.2em;
font-weight: 500;
text-align: center;
margin-bottom: 10px;
/* border-bottom: 1px solid #ccc;*/
line-height: 2.5;
width:70%;
margin-left: 3%;
margin:0 auto;
position: relative;
padding:calc(0.1rem + 1px) 0.5rem 0.1rem ;
}
/*
.profileTitle:before {
position: absolute;
top: -7px;
left: -7px;
width: 100%;
height: 100%;
content: '';
border: 3px solid #000;
}
*/
.profileTitle span {
display: inline-block;
padding-bottom: 10px;
position: relative;
}
.profileTitle2 {
font-size:100%;
width:100%;
margin:3% auto 0 auto;
text-align: center;
line-height:2;
}
}
/* 共通タイトルsp
***************************************************************/
/* Sec01
***************************************************************/
.sec01 .bottomsen{
border-bottom: 1px solid gray;
padding-bottom: 5%;
}
.sec01 {
background:#efe6da;
padding: 1% 0 0 0;
}
.sec01 .inner {
width: 1100px;
margin: auto;
}
.sec01 .inner h1{
font-size:100%;
}
.sec01 .inner p{
font-size:100%;
}
.sec01 .inner .kinringaikan{
width: 90%;
margin: 3% auto;
}
.sec01 .inner .kinringaikan img{
width: 100%;
}
.sec01 .inner .tochi_text {
width: 100%;
}
.sec01 .inner .tochi_text p{
font-size:100%;
line-height: 1.5;
margin:0 auto 0 auto;
}
.sec01 .inner .loc01{
height:200px;
/*background:#F5F7F6;*/
background: rgba(255,255,255,0.6);
margin:20% auto;
}
.sec01 .inner .loc01 .loc01_left250{
width:40%;
float:left;
display: inline-block;
margin: 3% 0 0 0;
}
.sec01 .inner .loc01 .loc01_titile{
font-size:180%;
text-align: center;
color: #708090;
line-height: 2;
}
.sec01 .inner .loc01 .explan01{
font-size:110%;
text-align: center;
line-height: 1.8;
}
.sec01 .inner .loc01 .loc01_photo{
width:60%;
float:right;
display: inline-block;
}
.sec01 .inner .loc01 .loc01_photo{
position: relative;
/* 親要素の幅 */
/* 親要素の高さ */
overflow: visible; /* 枠外に出る内容を表示する */
}
.sec01 .inner .loc01 .photo01 {
position: absolute;
top: -210px; /* 上に20pxはみ出させる */
right: -100px; /* 左に20pxはみ出させる */
height: auto;
/* transform: rotate(10deg); /* 角度を付けて配置 */
border: 5px solid #fff; /* 白い枠線を追加 */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
transition: transform 0.6s ease, opacity 0.6s ease; /* フェードインのトランジション */
opacity: 0;
transform: translateX(30px); /* 初期位置を右にずらす */
}
.sec01 .inner .loc01 .photo01.show {
opacity: 1;
transform: translateX(0); /* 位置を元に戻す */
}
.sec01 .inner .station_time{
width: 100%;
margin:-18% 0 0 0;
}
.sec01 .inner .loc02{
width:1100px;
height: 200px;
/*background:#F5F7F6;*/
background: rgba(255,255,255,0.6);
margin:30% auto;
}
.sec01 .inner .loc02 .loc02_left250{
width:40%;
float:right;
display: inline-block;
margin: 3% 0 0 0;
}
.sec01 .inner .loc02 .loc02_titile{
font-size:180%;
text-align: center;
color: #708090;
line-height: 2;
}
.sec01 .inner .loc02 .explan01{
font-size:110%;
text-align: center;
line-height: 1.8;
}
.sec01 .inner .loc02 .loc02_photo{
width:60%;
float:left;
display: inline-block;
}
.sec01 .inner .loc02 .loc02_photo{
position: relative;
/* 親要素の幅 */
/* 親要素の高さ */
overflow: visible; /* 枠外に出る内容を表示する */
}
.sec01 .inner .loc02 .photo02 {
position: absolute;
top: -210px; /* 上に20pxはみ出させる */
left: -100px; /* 左に20pxはみ出させる */
height: auto;
/* transform: rotate(10deg); /* 角度を付けて配置 */
border: 5px solid #fff; /* 白い枠線を追加 */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
transition: transform 0.6s ease, opacity 0.6s ease; /* フェードインのトランジション */
opacity: 0;
transform: translateX(-30px); /* 初期位置を右にずらす */
}
.sec01 .inner .loc02 .photo02.show {
opacity: 1;
transform: translateX(0); /* 位置を元に戻す */
}
.sec01 .inner .loc03{
width:1100px;
height: 200px;
/* background:#F5F7F6;*/
background: rgba(255,255,255,0.6);
margin:15% auto;
}
.sec01 .inner .loc03 .loc03_left250{
width:40%;
float:left;
display: inline-block;
margin: 3% 0 0 0;
}
.sec01 .inner .loc03 .loc03_titile{
font-size:180%;
text-align: center;
color: #708090;
line-height: 2;
}
.sec01 .inner .loc03 .explan01{
font-size:110%;
text-align: center;
line-height: 1.8;
}
.sec01 .inner .loc03 .loc03_photo{
width:60%;
float:right;
display: inline-block;
}
.sec01 .inner .loc03 .loc03_photo{
position: relative;
/* 親要素の幅 */
/* 親要素の高さ */
overflow: visible; /* 枠外に出る内容を表示する */
}
.sec01 .inner .loc03 .photo03 {
position: absolute;
top: -210px; /* 上に20pxはみ出させる */
right: -100px; /* 左に20pxはみ出させる */
height: auto;
/* transform: rotate(10deg); /* 角度を付けて配置 */
border: 5px solid #fff; /* 白い枠線を追加 */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
transition: transform 0.6s ease, opacity 0.6s ease; /* フェードインのトランジション */
opacity: 0;
transform: translateX(30px); /* 初期位置を右にずらす */
}
.sec01 .inner .loc03 .photo03.show {
opacity: 1;
transform: translateX(0); /* 位置を元に戻す */
}
.sec01 .inner .loc04{
width:1100px;
height: 200px;
/* background:#F5F7F6;*/
background: rgba(255,255,255,0.6);
margin:30% auto 15% auto;
}
.sec01 .inner .loc04 .loc04_left250{
width:40%;
float:right;
display: inline-block;
margin: 3% 0 0 0;
}
.sec01 .inner .loc04 .loc04_titile{
font-size:180%;
text-align: center;
color: #708090;
line-height: 2;
}
.sec01 .inner .loc04 .explan01{
font-size:110%;
text-align: center;
line-height: 1.8;
}
.sec01 .inner .loc04 .loc04_photo{
width:60%;
float:left;
display: inline-block;
}
.sec01 .inner .loc04 .loc04_photo{
position: relative;
/* 親要素の幅 */
/* 親要素の高さ */
overflow: visible; /* 枠外に出る内容を表示する */
}
.sec01 .inner .loc04 .photo04 {
position: absolute;
top: -210px; /* 上に20pxはみ出させる */
left: -100px; /* 左に20pxはみ出させる */
height: auto;
/* transform: rotate(10deg); /* 角度を付けて配置 */
border: 5px solid #fff; /* 白い枠線を追加 */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
transition: transform 0.6s ease, opacity 0.6s ease; /* フェードインのトランジション */
opacity: 0;
transform: translateX(-30px); /* 初期位置を右にずらす */
}
.sec01 .inner .loc04 .photo04.show {
opacity: 1;
transform: translateX(0); /* 位置を元に戻す */
}
.sec01 .inner .loc05{
width:1100px;
height: 200px;
/* background:#F5F7F6;*/
background: rgba(255,255,255,0.6);
margin:30% auto 15% auto;
}
.sec01 .inner .loc05 .loc05_left250{
width:40%;
float:left;
display: inline-block;
margin: 3% 0 0 0;
}
.sec01 .inner .loc05 .loc05_titile{
font-size:180%;
text-align: center;
color: #708090;
line-height: 2;
}
.sec01 .inner .loc05 .explan01{
font-size:110%;
text-align: center;
line-height: 1.8;
}
.sec01 .inner .loc05 .loc05_photo{
width:60%;
float:right;
display: inline-block;
}
.sec01 .inner .loc05 .loc05_photo{
position: relative;
/* 親要素の幅 */
/* 親要素の高さ */
overflow: visible; /* 枠外に出る内容を表示する */
}
.sec01 .inner .loc05 .photo05 {
position: absolute;
top: -210px; /* 上に20pxはみ出させる */
right: -100px; /* 左に20pxはみ出させる */
height: auto;
/* transform: rotate(10deg); /* 角度を付けて配置 */
border: 5px solid #fff; /* 白い枠線を追加 */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
transition: transform 0.6s ease, opacity 0.6s ease; /* フェードインのトランジション */
opacity: 0;
transform: translateX(30px); /* 初期位置を右にずらす */
}
.sec01 .inner .loc05 .photo05.show {
opacity: 1;
transform: translateX(0); /* 位置を元に戻す */
}
.sec01 .inner .map_tit{
font-size:180%;
text-align: center;
margin: 0 0 2% 0;
letter-spacing: 0.2rem;
}
.sec01 .inner .heading04 {
display: flex;
justify-content: center;
align-items: center;
font-size: 150%;
text-align: center;
margin: 3% 0% 0% 0%;
}
.sec01 .inner .heading04::before,
.sec01 .inner .heading04::after {
content: '';
width: 3px;
height: 40px;
background-color: #708090;
}
.sec01 .inner .heading04::before {
margin-right: 30px;
transform: rotate(-35deg)
}
.sec01 .inner .heading04::after {
margin-left: 30px;
transform: rotate(35deg)
}
/* 1箱に収めるラッパ */
.sec01 .inner .slider3-box{
max-width: 1100px;
margin: 0 auto;
position: relative;
overflow: hidden; /* ← はみ出しを防止 */
}
/* スライド各コマを絶対配置の基準にする */
#slider3 > div{ position: relative; }
/* 画像のはみ出し＆行間隙間を抑止 */
#slider3 img{ display:block; width:100%; height:auto; }
/* bxSliderのビューポートを親幅にフィット＆隠す */
.bx-wrapper, .bx-viewport{ width:100% !important; }
.bx-viewport{ overflow:hidden !important; }
/* （キャプションがある場合）帯が枠外に出ないように */
#slider3 div p{
position:absolute; left:0; right:0; bottom:0;
}
/* サムネの左右矢印が重なってもはみ出さない */
.thumbs-wrap .bx-wrapper{ margin:0 48px !important; }
/* サムネがUL/LIの場合の基本（既に同等の定義があるなら不要） */
.bxslider_thumbnail3{ list-style:none; margin:0; padding:0; }
.bxslider_thumbnail3 > li{ padding:0 4px; }
.bxslider_thumbnail3 > li > a{ display:block; position:relative; padding-top:75%; }
.bxslider_thumbnail3 > li > a > img{
position:absolute; top:0; left:50%; transform:translateX(-50%);
max-width:100%; max-height:100%;
}
/* ラッパと矢印 */
.thumbs-wrap { position: relative; }
.thumb-prev, .thumb-next {
position: absolute; top: 40%;
transform: translateY(-50%);
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(0,0,0,0.5)!important;
display: inline-block;
z-index:100;
}
.thumb-prev { left: -8px; }
.thumb-next { right: -8px; }
/* くの字アイコン（白チート線） */
.thumb-prev::after, .thumb-next::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
top: 50%;
left: 50%;
}
.thumb-prev::after { transform: translate(-35%, -50%) rotate(-135deg); }
.thumb-next::after { transform: translate(-65%, -50%) rotate(45deg); }
/* bx のラッパに左右余白（矢印と重ならないように） */
.thumbs-wrap .bx-wrapper { margin: 0 48px !important; }
/* Sec01
***************************************************************/
/* Sec01 sp
***************************************************************/
@media all and (max-width: 680px) {
.sec01 {
padding: 8% 0 0% 0;
}
.sec01 .inner {
width: 98%!important;
margin: auto;
}
.sec01 .inner .kinringaikan{
width: 100%;
margin: 3% auto;
}
.sec01 .inner .kinringaikan img{
width: 100%;
}
.sec01 .inner .loc01{
width:90%;
height:310px;
margin:5% auto 5% auto;
}
.sec01 .inner .loc01 .loc01_left250{
width:98%;
}
.sec01 .inner .loc01 .loc01_titile{
font-size:110%;
text-align: center;
padding:0;
}
.sec01 .inner .loc01 .explan01{
font-size:90%;
text-align: center;
line-height: 1.8;
}
.sec01 .inner .loc01 .loc01_photo{
width:90%;
margin: 0 5% 0 5%;
}
.sec01 .inner .loc01 .loc01_photo{
position: relative;
/* 親要素の幅 */
/* 親要素の高さ */
overflow: visible; /* 枠外に出る内容を表示する */
}
.sec01 .inner .loc01 .photo01 {
position: absolute;
top:0; /* 上に20pxはみ出させる */
right: 0; /* 左に20pxはみ出させる */
height: auto;
/* transform: rotate(10deg); /* 角度を付けて配置 */
border: 5px solid #fff; /* 白い枠線を追加 */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
transition: transform 0.6s ease, opacity 0.6s ease; /* フェードインのトランジション */
opacity: 0;
transform: translateX(30px); /* 初期位置を右にずらす */
}
.sec01 .inner .loc01 .photo01.show {
opacity: 1;
transform: translateX(0); /* 位置を元に戻す */
}
.sec01 .inner .station_time{
width: 100%;
margin:-1% 0 0 0;
}
.sec01 .inner .loc02{
width:90%;
height:310px;
margin:5% auto 5% auto;
}
.sec01 .inner .loc02 .loc02_left250{
width:98%;
}
.sec01 .inner .loc02 .loc02_titile{
font-size:110%;
text-align: center;
padding:0;
}
.sec01 .inner .loc02 .explan01{
font-size:90%;
text-align: center;
line-height: 1.8;
}
.sec01 .inner .loc02 .loc02_photo{
width:90%;
margin: 0 5% 0 5%;
}
.sec01 .inner .loc02 .loc02_photo{
position: relative;
/* 親要素の幅 */
/* 親要素の高さ */
overflow: visible; /* 枠外に出る内容を表示する */
}
.sec01 .inner .loc02 .photo02 {
position: absolute;
top: 0; /* 上に20pxはみ出させる */
left: 0; /* 左に20pxはみ出させる */
height: auto;
/* transform: rotate(10deg); /* 角度を付けて配置 */
border: 5px solid #fff; /* 白い枠線を追加 */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
transition: transform 0.6s ease, opacity 0.6s ease; /* フェードインのトランジション */
opacity: 0;
transform: translateX(-30px); /* 初期位置を右にずらす */
}
.sec01 .inner .loc02 .photo02.show {
opacity: 1;
transform: translateX(0); /* 位置を元に戻す */
}
.sec01 .inner .loc03{
width:90%;
height:310px;
margin:5% auto 5% auto;
}
.sec01 .inner .loc03 .loc03_left250{
width:98%;
}
.sec01 .inner .loc03 .loc03_titile{
font-size:110%;
text-align: center;
padding:0;
}
.sec01 .inner .loc03 .loc03_titile span{
font-size:70%;
}
.sec01 .inner .loc03 .explan01{
font-size:90%;
text-align: center;
line-height: 1.8;
}
.sec01 .inner .loc03 .loc03_photo{
width:90%;
margin: 0 5% 0 5%;
}
.sec01 .inner .loc03 .loc03_photo{
position: relative;
/* 親要素の幅 */
/* 親要素の高さ */
overflow: visible; /* 枠外に出る内容を表示する */
}
.sec01 .inner .loc03 .photo03 {
position: absolute;
top: 0; /* 上に20pxはみ出させる */
right: 0; /* 左に20pxはみ出させる */
height: auto;
/* transform: rotate(10deg); /* 角度を付けて配置 */
border: 5px solid #fff; /* 白い枠線を追加 */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
transition: transform 0.6s ease, opacity 0.6s ease; /* フェードインのトランジション */
opacity: 0;
transform: translateX(30px); /* 初期位置を右にずらす */
}
.sec01 .inner .loc03 .photo03.show {
opacity: 1;
transform: translateX(0); /* 位置を元に戻す */
}
.sec01 .inner .loc04{
width:90%;
height:310px;
margin:5% auto 5% auto;
}
.sec01 .inner .loc04 .loc04_left250{
width:98%;
}
.sec01 .inner .loc04 .loc04_titile{
font-size:110%;
text-align: center;
padding:0;
}
.sec01 .inner .loc04 .explan01{
font-size:90%;
text-align: center;
line-height: 1.8;
}
.sec01 .inner .loc04 .loc04_photo{
width:90%;
margin: 0 5% 0 5%;
}
.sec01 .inner .loc04 .photo04 {
position: absolute;
top:0px; /* 上に20pxはみ出させる */
left: 0; /* 左に20pxはみ出させる */
height: auto;
/* transform: rotate(10deg); /* 角度を付けて配置 */
border: 5px solid #fff; /* 白い枠線を追加 */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
transition: transform 0.6s ease, opacity 0.6s ease; /* フェードインのトランジション */
opacity: 0;
transform: translateX(-30px); /* 初期位置を右にずらす */
}
.sec01 .inner .loc04 .photo04.show {
opacity: 1;
transform: translateX(0); /* 位置を元に戻す */
}
.sec01 .inner .loc05{
width:90%;
height:310px;
margin:5% auto 5% auto;
}
.sec01 .inner .loc05 .loc05_left250{
width:98%;
}
.sec01 .inner .loc05 .loc05_titile{
font-size:110%;
text-align: center;
padding:0;
}
.sec01 .inner .loc05 .loc05_titile span{
font-size:70%;
}
.sec01 .inner .loc05 .explan01{
font-size:90%;
text-align: center;
line-height: 1.8;
}
.sec01 .inner .loc05 .loc05_photo{
width:90%;
margin: 0 5% 0 5%;
}
.sec01 .inner .loc05 .loc05_photo{
position: relative;
/* 親要素の幅 */
/* 親要素の高さ */
overflow: visible; /* 枠外に出る内容を表示する */
}
.sec01 .inner .loc05 .photo05 {
position: absolute;
top: 0; /* 上に20pxはみ出させる */
right: 0; /* 左に20pxはみ出させる */
height: auto;
/* transform: rotate(10deg); /* 角度を付けて配置 */
border: 5px solid #fff; /* 白い枠線を追加 */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
transition: transform 0.6s ease, opacity 0.6s ease; /* フェードインのトランジション */
opacity: 0;
transform: translateX(30px); /* 初期位置を右にずらす */
}
.sec01 .inner .loc05 .photo05.show {
opacity: 1;
transform: translateX(0); /* 位置を元に戻す */
}
.sec01 .inner .map_tit{
font-size:120%;
text-align: center;
margin-top: 10%;
}
.sec01 .inner .heading04 {
display: flex;
justify-content: center;
align-items: center;
font-size: 120%;
text-align: center;
}
.sec01 .inner .heading04::before,
.sec01 .inner .heading04::after {
content: '';
width: 3px;
height: 30px;
}
.sec01 .inner .heading04::before {
margin-right: 5%;
transform: rotate(-25deg)
}
.sec01 .inner .heading04::after {
margin-left: 5%;
transform: rotate(25deg)
}
.secTochi .inner .slick-img img{
height: auto;
width: 100%;
}
}
/* Sec01 sp
***************************************************************/
/* Sec02
***************************************************************/
.sec02 {
/* background:#fff;*/
padding: 2% 0 0 0;
}
.sec02 .inner {
width: 1100px;
margin: auto;
}
.sec02 .inner .profileTitle:before {
position: absolute;
top: -7px;
left: -7px;
width: 100%;
height: 100%;
content: '';
border: 3px solid #000;
}
.sec02 .inner .profileTitle span {
display: inline-block;
padding-bottom: 19px;
position: relative;
}
.sec02 .inner .place{
font-size: 120%;
text-align: left;
margin: 0% auto 0% 28%;
}
.sec02 .inner .place2{
font-size: 120%;
text-align: left;
margin: 0% auto 0% 28%;
}
.sec02 .inner .heading04 {
display: flex;
justify-content: center;
align-items: center;
font-size: 150%;
text-align: center;
margin: 3% 0% 0% 0%;
}
.sec02 .inner .heading04::before,
.sec02 .inner .heading04::after {
content: '';
width: 3px;
height: 40px;
background-color: #708090;
}
.sec02 .inner .heading04::before {
margin-right: 30px;
transform: rotate(-35deg)
}
.sec02 .inner .heading04::after {
margin-left: 30px;
transform: rotate(35deg)
}
.sec02 .inner .night-tour{
margin: 2% 0 2% 0;
padding: 2.5% 1% 1% 1%;
background:#191970 ;
}
.sec02 .inner .night-tour .leftside{
float: left;
width:29%;
margin: 0 1% 0 0;
}
.sec02 .inner .night-tour .rightside{
float:right;
width:69%;
margin: 0 0 0 1%;
}
.sec02 .inner .night-tour h1{
font-size: 150%;
color: #ffff00;
text-align: center;
border: 2px solid #ffff00;
padding: 4% 1% 5% 1% ;
}
.sec02 .inner .night-tour p{
font-size: 130%;
color: #fff;
padding: 2.5% 0 2% 0 ;
}
.sec02 .inner ul{
margin: auto;
display: flex;
justify-content: center;
align-items: center;
}
.sec02 .inner ul li{
width: 30%;
margin:1.5%;
}
.sec02 .inner ul li {
cursor: pointer;
max-width: 380px;
overflow: hidden;
width: 100%;
}
.sec02 .inner ul li img {
height: auto;
transition: transform .6s ease; /* ゆっくり変化させる */
}
.sec02 .inner ul li:hover img {
transform: scale(1.1); /* 拡大 */
}
/* Sec02
***************************************************************/
/* Sec02 sp
***************************************************************/
@media all and (max-width: 680px) {
.sec02 {
padding: 8% 0 0 0;
}
.sec02 .inner {
width: 98%;
margin: auto;
}
.sec02 .inner .heading04 {
display: flex;
justify-content: center;
align-items: center;
font-size: 120%;
text-align: center;
}
.sec02 .inner .heading04::before,
.sec02 .inner .heading04::after {
content: '';
width: 3px;
height: 30px;
}
.sec02 .inner .heading04::before {
margin-right: 5%;
transform: rotate(-25deg)
}
.sec02 .inner .heading04::after {
margin-left: 5%;
transform: rotate(25deg)
}
.sec02 .inner .night-tour{
margin: 2% 3% 2% 3%;
padding: 2.5% 1% 1% 1%;
width:94%;
}
.sec02 .inner .night-tour .leftside{
float: left;
width:96%;
margin: 0 2% 1% 2%;
}
.sec02 .inner .night-tour .rightside{
float:right;
width:96%;
margin: 0 2% 0 2%;
}
.sec02 .inner .night-tour h1{
font-size: 120%;
text-align: center;
border: 2px solid #ffff00;
padding: 3% 1% 3% 1% ;
}
.sec02 .inner .night-tour p{
font-size: 100%;
padding: 2.5% 0 2% 0 ;
line-height: 1.5;
text-align: center;
}
.sec02 .inner ul{
width: 98%;
margin: auto;
display:contents;
justify-content: center;
align-items: center;
}
.sec02 .inner ul li{
margin:2% 10% 2% 10%;
float:left;
cursor: pointer;
overflow: hidden;
width:80%;
}
.sec02 .inner ul li img {
height: auto;
transition: transform .6s ease; /* ゆっくり変化させる */
}
.sec02 .inner ul li:hover img {
transform: scale(1.1); /* 拡大 */
}
.sec02 .inner .profileTitle {
font-size: 140%;
font-family: 'Yu Gothic UI Semibold';
letter-spacing: 0.2em;
font-weight: 500;
text-align: center;
margin-bottom: 10px;
/* border-bottom: 1px solid #ccc;*/
line-height: 2.5;
width:70%;
margin-left: 3%;
margin:0 auto;
position: relative;
padding:calc(0.1rem + 1px) 0.5rem 0.1rem ;
}
.sec02 .inner .place{
font-size: 120%;
text-align: left;
margin: 0% auto 0% 12%;
}
.sec02 .inner .place2{
font-size: 120%;
text-align: left;
margin: 0% auto 0% 12%;
}
}
/* Sec02 sp
***************************************************************/
/* Sec03
***************************************************************/
.sec03 {
background:#f7f6fb;
padding: 5% 0 5% 0;
}
.sec03 .inner {
width: 1100px;
margin: auto;
}
.sec03 .post_text01 {
display: inline-block;
width:100%;
text-align: center;
font-size:150%;
color:#746228;
font-weight:bold;
border-top: solid 3px #746228;
border-bottom: solid 3px #746228;
margin: 0 auto 3% auto;
padding: 15px 5px 15px 5px;
}
.bottom_sen{
padding-bottom:2%;
margin-bottom: 4%;
border-bottom:thin gray dotted;
}
.model_title {
font-size: 180%;
}
.model_title span {
display: flex;
align-items: center;
font-size:90%;
text-transform: uppercase;
line-height: 2.5;
}
.model_title span::before {
content: '';
display: inline-block;
margin-right: 20px;
width: 40px;
height: 3px;
background-color: #000;
}
.sec03 .inner p.model_exam {
position: relative;
margin:5% 0;
font-size:100%;
text-align:center;
}
.sec03 .inner .modelphoto{
width:100%;
margin: 2% 0 3% 0;
}
.sec03 .inner .modelphoto h1{
font-size: 120%;
text-align:left;
line-height: 1.8;
}
.sec03 .inner .modelphoto p{
font-size: 100%;
line-height: 1.2;
text-align:left;
}
.sec03 .inner .modelphoto2{
width:45.5%;
margin: 3% 2% 3% 2%;
display: inline-block;
}
.sec03 .inner .modelphoto2 h1{
font-size: 120%;
line-height: 1.8;
}
.sec03 .inner .modelphoto2 p{
font-size: 100%;
line-height: 1.2;
text-align:left;
}
.kakaku{
width:100%;
}
.price-2{
width:100%;
margin:2% 1% 2% 1%;
float:left;
display:inline-block;
}
.title-2{
margin:1% 0 0.5% 5%;
border: solid 1px;
padding:5px 4px;
width:235px;
text-align: center;
float:left;
font-size:85%!important;
background: #000000;
color:#ffffff;
}
.nijiu{
position: relative;
}
.nijiu::before,
.nijiu::after {
position: absolute;
content: "";
display: block;
transform: rotate(0);
background-color: red;
width: 100%;
height: 2px;
left: 0;
}
.nijiu::before {
top: 55%;
}
.nijiu::after {
top: 42%;
}
/*.tri {
display: inline-block;
vertical-align: middle;
color: #333;
line-height: 1;
margin:0 auto;
height: 0;
border-style: solid;
border-color: transparent;
border-width: 1.0em 1.3em;
border-top-color: currentColor;
border-bottom: 0;
margin:5% 18%;
}
*/
.old_price{
font-size:100%!important;
float:left;
display: inline-block;
text-align: center;
margin:0 2% 1% 2%;
position: relative;
}
/*.old_price:after{
content:"";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("https://www.showa-jutaku.co.jp/homenew/2024shinshun/sv_kakogawacho_kitazaike_6/files/img/batu.png");
background-size: cover;
}
*/
.old_price span{
font-size:200%;
}
.new_price::before {
content: "";
display: inline-block;
width: 0;
height: 0;
margin: 0 0.7em 0 0;
border:11px solid transparent;
border-right: 0 solid transparent;
border-left: 15px solid #000;
vertical-align: middle;
}
.new_price{
color:red;
font-size:250%!important;
float:left;
display: inline-block;
line-height:0.4;
margin-bottom: 2%;
padding-top: 1%;
}
.new_price span{
color:#000000;
font-size:37%;
margin-bottom: 1%;
}
.price{
color:red;
font-size:250%!important;
text-align: center;
float:left;
display: inline-block;
margin-bottom: 2%;
padding-top: 5%;
}
.price span{
color:#000000;
font-size:40%;
margin-bottom: 1%;
padding-top: 5%;
display: inline-block;
}
.price_right{
width:45%;
border: solid 1px;
display:inline-block;
margin:2% 0;
}
.price_right2{
width:45%;
display:inline-block;
margin:2% 0;
}
.price_right3{
width:98%;
margin-top:10%;
border: solid 1px;
display:inline-block;
}
.price_ex{
width:100%;
background: #000000;
color:#fff;
padding:2%;
margin:0 auto 3% auto;
text-align: center;
font-size: 110%;
}
.sec03 .inner .kingaku{
width:100%;
margin:0 auto;
}
.sec03 .inner .kingaku dl{
border-bottom: thin dashed gray;
margin-bottom: 5%;
}
.sec03 .inner .kingaku dt{
width:15%;
font-size:110%;
display:inline-block;
text-align: right;
line-height: 1.2;
}
.sec03 .inner .kingaku dd{
width:30%;
font-size:120%;
display:inline-block;
text-align: right;
line-height: 1.2;
vertical-align: bottom;
}
.sec03 .inner .kingaku dd span{
font-size:150%;
}
.sec03 .inner .kingaku dt2{
width:35%;
font-size:110%;
display:inline-block;
text-align: right;
line-height: 1.2;
}
.sec03 .inner .kingaku dd2{
width:10%;
font-size:120%;
display:inline-block;
text-align: right;
line-height: 1.2;
vertical-align: bottom;
}
.sec03 .inner .kingaku dd2 span2{
font-size:100%;
}
.sec03 .inner .ka_tx{
width:90%;
margin:1% auto;
font-size:80%;
line-height:1.5;
}
.sec03 .inner .point{
width:100%;
margin:5% 0 5% 0;
}
.sec03 .inner .point p.catch {
display: flex;
align-items: center; /* 垂直中心 */
justify-content: center; /* 水平中心 */
font-size:150%;
margin: 0 0 2% 0;
}
.sec03 .inner .point p.catch:before, .point p.catch:after {
border-top: 1px solid;
content: "";
width:4em; /* 線の長さ */
}
.sec03 .inner .point p.catch:before {
margin-right: 1em; /* 文字の右隣 */
}
.sec03 .inner .point p.catch:after {
margin-left: 1em; /* 文字の左隣 */
}
.sec03 .inner ul {
width:100%;
display: flex;
margin:0 auto;
justify-content: space-between;
}
.sec03 .inner li {
width: 32%;
margin:1% ;
padding:10px 0;
text-align: center;
display:inline-block;
box-sizing: border-box;
position: relative;
background:#6e7c84;
color:#ffffff;
border-radius:3px;
font-size: 100%;
}
.model_other {
display: flex;
justify-content: center;
align-items: center;
font-size: 180%;
text-align: center;
}
.model_other::before,
.model_other::after {
content: '';
width: 3px;
height: 40px;
background-color: #000;
}
.model_other::before {
margin-right: 30px;
transform: rotate(-35deg)
}
.model_other::after {
margin-left: 30px;
transform: rotate(35deg)
}
.sec03 .inner .modelselect{
width:39.5%;
margin: 2% 5% 3% 5%;
display: inline-block;
background: #000;
}
.sec03 .inner .modelselect .modelselectimg{
width:100%;
position: relative;
margin-bottom: 1%;
}
.sec03 .inner .modelselect .modelselectimg .modelselect_text{
position: absolute;
bottom: 2%;
left: 1%;
color:#ffffff;
font-size: 120%;
/* border-top: 1.5px solid gray;*/
border-bottom: 1.5px solid #fff;
padding: 2% 5%;
}
.sec03 .inner .modelselect .modelselect_text2{
font-size: 100%;
text-align: center;
color:#ffffff;
padding:0 4%;
line-height:1.6;
margin: 2%;
}
.kakaku2{
width:100%;
margin: 0 0 1% 0;
}
.price-3{
width:50%;
margin:2% 1% 2% 1%;
float:left;
display:inline-block;
}
.title-3{
margin:1% 5% 0.5% 5%;
border: solid 2px;
padding:5px 4px;
width:150px;
text-align: center;
float:left;
font-size:120%!important;
background: #ffffff;
color:#000;
}
.tochi_price{
font-size:350%;
font-weight: 600;
color:red;
padding-left:2%;
}
.tochi_price span{
font-size:70%;
}
.scall {
position: relative;
padding-top:20px;
padding-right: 100px;
font-size:200%;
text-align: right; /* 文字の中央寄せ */
}
.scall::before {
background-color: #000; /* 線の色 */
border-radius: 5px; /* 線の両端を丸く */
content: "";
height: 3px; /* 線の高さ */
left:68%; /* 線の中央寄せ */
position: absolute;
top: 10px; /* 線の位置 */
transform: translateX(-50%); /* 線の中央寄せ */
width: 140px; /* 線の長さ */
}
.scall span{
font-size:70%;
text-align: right; /* 文字の中央寄せ */
}
.price-co{
width:40%;
margin:2% 1% 2% 1%;
float:left;
display:inline-block;
}
.txt_bb{
font-size:350%;
font-family: "Kaisei Tokumin", serif;
font-weight: 500;
font-style: normal;
text-align: center;
}
.txt_bb2{
font-size:350%;
font-family: "Kaisei Tokumin", serif;
font-weight: 500;
font-style: normal;
text-align: center;
letter-spacing: 0.2rem;
padding: 0 0 1% 0;
border-bottom: thin solid gray;
}
.txt_bb2 span{
font-size:50%;
margin:0 0 0 2% ;
}
.txt_ss{
width:62%;
margin:0 auto;
padding-top:5%;
font-size:100%;
line-height: 1.8;
}
.top-zone03 {
margin:7% 0;
width: 100%;
height: 350px;
background: url(../img/work_img.jpg) center center repeat-x;
background-size: auto 100%;
position: relative;
overflow: hidden;
-webkit-animation: fadeAnimations 1000s linear infinite;
-moz-animation: fadeAnimations 1000s linear infinite;
-ms-animation: fadeAnimations 12000s linear infinite;
animation: fadeAnimations 3000s linear infinite;
}
@-webkit-keyframes fadeAnimations {
0% {
background-position:0 center;
}
100% {
background-position:44400% center;
}
}
@-moz-keyframes fadeAnimations {
0% {
background-position:0 center;
}
100% {
background-position:44400% center;
}
}
@-ms-keyframes fadeAnimations {
0% {
background-position:0 center;
}
100% {
background-position:44400% center;
}
}
@keyframes fadeAnimations {
0% {
background-position:0 center;
}
100% {
background-position:44400% center;
}
}
.sec03 .inner .outline_text{
font-size: 80%;
line-height: 1.1;
margin: 0 0 8% 0;
}
/* Sec03
***************************************************************/
/* Sec03 sp
***************************************************************/
@media all and (max-width: 680px) {
.sec03 {
padding: 10% 0 10% 0;
}
.sec03 .inner {
width: 98%;
margin: auto;
}
.sec03 .post_text01 {
display: inline-block;
width:100%;
text-align: center;
font-size:120%;
margin: 0 auto 5%;
padding: 15px 5px 15px 5px;
}
.bottom_sen{
padding-bottom:2%;
margin-bottom: 4%;
border-bottom:thin gray dotted;
}
.model_title {
font-size: 100%;
margin: 0 0 3% 0
}
.model_title span {
display: flex;
align-items: center;
font-size:90%;
text-transform: uppercase;
line-height: 2.5;
}
.model_title span::before {
content: '';
display: inline-block;
margin-right: 20px;
width: 40px;
height: 3px;
}
.sec03 .inner p.model_exam {
position: relative;
margin:5% 0 5% 10%;
font-size:90%;
text-align:left;
line-height: 1.3;
}
.sec03 .inner .modelphoto{
width:96%;
margin: 3% 2% 5% 2%;
}
.sec03 .inner .modelphoto h1{
font-size: 95%;
text-align:left;
line-height: 1.8;
}
.sec03 .inner .modelphoto p{
font-size: 82%;
line-height: 1.2;
text-align:left;
}
.sec03 .inner .modelphoto2{
width:96%;
margin: 2% 2% 3% 2%;
display: inline-block;
}
.sec03 .inner .modelphoto2 h1{
font-size: 95%;
line-height: 1.8;
}
.sec03 .inner .modelphoto2 p{
font-size: 82%;
line-height: 1.2;
text-align:left;
}
.kakaku{
width:100%;
}
.price-2{ width:98%;
margin:2% 0 2% 0;
float:left;
display:inline-block;
}
.title-2{
margin:3% 0 2% 3%;
border: solid 1px;
padding:1% 3% 1.5% 3%;
width:70%;
text-align: center;
float:left;
font-size:85%!important;
background: #000000;
color:#ffffff;
}
.nijiu{
position: relative;
}
.nijiu::before,
.nijiu::after {
position: absolute;
content: "";
display: block;
transform: rotate(0);
background-color: red;
width: 100%;
height: 2px;
left: 0;
}
.nijiu::before {
top: 55%;
}
.nijiu::after {
top: 42%;
}
/*.tri {
display: inline-block;
vertical-align: middle;
color: #333;
line-height: 1;
margin:0 auto;
height: 0;
border-style: solid;
border-color: transparent;
border-width: 1.0em 1.3em;
border-top-color: currentColor;
border-bottom: 0;
margin:5% 18%;
}
*/
.old_price{
font-size:78%!important;
float:left;
display: inline-block;
text-align: center;
margin:0 0 1% 0;
position: relative;
}
/*.old_price:after{
content:"";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("https://www.showa-jutaku.co.jp/homenew/2024shinshun/sv_kakogawacho_kitazaike_6/files/img/batu.png");
background-size: cover;
}
*/
.old_price span{
font-size:150%;
}
.new_price::before {
content: "";
display: inline-block;
width: 0;
height: 0;
margin: 0 0.2em 0 0;
border:8px solid transparent;
border-right: 0 solid transparent;
border-left: 8px solid #000;
vertical-align: middle;
}
.new_price{
color:red;
font-size:160%!important;
float:left;
display: inline-block;
line-height:0.4;
margin-bottom: 2%;
padding-top: 1%;
}
.new_price span{
color:#000000;
font-size:46%;
margin-bottom: 1%;
}
.price_right{
width:90%;
border: solid 1px;
display:inline-block;
margin:2% 5%;
}
.price_ex{
width:100%;
background: #000000;
color:#fff;
padding:2%;
margin:0 auto 3% auto;
text-align: center;
font-size: 110%;
}
.sec03 .inner .kingaku{
width:100%;
margin:0 auto;
}
.sec03 .inner .kingaku dl{
border-bottom: thin dashed gray;
margin-bottom: 5%;
}
.sec03 .inner .kingaku dt{
width:13%;
font-size:90%;
display:inline-block;
text-align: right;
line-height: 1.2;
}
.sec03 .inner .kingaku dd{
width:35%;
font-size:120%;
display:inline-block;
text-align: right;
line-height: 1.2;
vertical-align: bottom;
}
.sec03 .inner .kingaku dd span{
font-size:120%;
}
.sec03 .inner .kingaku dt2{
width:35%;
font-size:90%;
display:inline-block;
text-align: right;
line-height: 1.2;
}
.sec03 .inner .kingaku dd2{
width:10%;
font-size:100%;
display:inline-block;
text-align: right;
line-height: 1.2;
vertical-align: bottom;
}
.sec03 .inner .kingaku dd2 span2{
font-size:90%;
}
.sec03 .inner .ka_tx{
margin-top:3%;
font-size:75%;
line-height:1.5;
}
.sec03 .inner .point{
width:100%;
}
.sec03 .inner .point p.catch {
display: flex;
align-items: center; /* 垂直中心 */
justify-content: center; /* 水平中心 */
font-size:100%;
margin-top:30px;
}
.sec03 .inner .point p.catch:before, .point p.catch:after {
border-top: 1px solid;
content: "";
width:4em; /* 線の長さ */
}
.sec03 .inner .point p.catch:before {
margin-right: 1em; /* 文字の右隣 */
}
.sec03 .inner .point p.catch:after {
margin-left: 1em; /* 文字の左隣 */
}
.sec03 .inner ul {
width:100%;
display:inline-block;
margin:0 auto;
/*justify-content: space-between;*/
}
.sec03 .inner li {
width: 48%;
margin:1% 1%;
float:left;
padding:10px 0;
text-align: center;
display:inline-block;
box-sizing: border-box;
position: relative;
background:#6e7c84;
color:#ffffff;
border-radius:3px;
font-size: 70%;
}
.sec03 .inner .modelselect{
width:48%;
margin: 2% 0.5% 3% 0.5%;
display: inline-block;
}
.sec03 .inner .modelselect .modelselectimg{
width:100%;
position: relative;
margin-bottom: 2%;
}
.sec03 .inner .modelselect .modelselectimg .modelselect_text{
position: absolute;
bottom: 0.5%;
left: 1%;
font-size: 90%;
/* border-top: 1.5px solid gray;*/
padding: 2% 5%;
}
.sec03 .inner .modelselect .modelselect_text2{
font-size: 80%;
text-align: center;
padding:0 1% 2% 1%;
line-height:1.6;
margin: 0;
}
.model_other {
display: flex;
justify-content: center;
align-items: center;
font-size:100%;
text-align: center;
}
.model_other::before,
.model_other::after {
content: '';
width: 3px;
height: 40px;
}
.model_other::before {
margin-right: 30px;
transform: rotate(-35deg)
}
.model_other::after {
margin-left: 30px;
transform: rotate(35deg)
}
.kakaku2{
width:100%;
}
.price-3{ width:98%;
margin:2% 1% 2% 1%;
float:left;
display:inline-block;
}
.title-3{
border: solid 2px;
padding:5px 4px;
width:25%;
text-align: center;
float:left;
font-size:100%!important;
background: #ffffff;
color:#000;
}
.tochi_price{
font-size:250%;
font-weight: 600;
color:red;
padding-left:5%;
margin-left:5%;
}
.tochi_price span{
font-size:70%;
}
.scall {
position: relative;
padding-top:20px;
padding-right: 100px;
font-size:200%;
text-align: right; /* 文字の中央寄せ */
}
.scall::before {
background-color: #000; /* 線の色 */
border-radius: 5px; /* 線の両端を丸く */
content: "";
height: 3px; /* 線の高さ */
left:68%; /* 線の中央寄せ */
position: absolute;
top: 10px; /* 線の位置 */
left:60%;
transform: translateX(-50%); /* 線の中央寄せ */
width: 140px; /* 線の長さ */
}
.scall span{
font-size:70%;
text-align: right; /* 文字の中央寄せ */
}
.price-co{ width:98%;
margin:2% 1% 2% 1%;
float:left;
display:inline-block;
}
.txt_bb{
font-size:320%;
font-style: normal;
text-align: center;
}
.txt_bb2{
font-size:200%;
font-style: normal;
text-align: center;
letter-spacing: 0.2rem;
padding: 0 0 1% 0;
border-bottom: none;
line-height: 0.7;
}
.txt_bb2 span{
font-size:45%;
margin:0 0 0 0 ;
}
.txt_ss{
width:80%;
margin:0 auto;
padding-top:5%;
font-size:90%;
line-height: 1.8;
}
.price_right2{
width:98%;
display:inline-block;
margin:2% 0;
}
.price_right3{
width:98%;
margin:3%;
border: solid 1px;
display:inline-block;
}
.price{
color:red;
font-size:180%!important;
text-align: center;
float:left;
display: inline-block;
margin-bottom: 2%;
padding-top: 1%;
}
.price span{
color:#000000;
font-size:45%;
margin-bottom: 1%;
padding-top: 1%;
display: inline-block;
}
.sec03 .inner .outline_text{
font-size: 70%;
line-height: 1.1;
}
}
/* Sec03 sp
***************************************************************/
/* Sec04
***************************************************************/
.sec04 {
background:#fff;
padding: 50px 0 20px;
}
.sec04 .inner {
width: 1000px;
margin: auto;
}
.loc-title{
width:100%;
display: inline-block;
font-weight:bold;
text-align: left;
border-left: solid 5px #000;
margin: 0 auto 50px;
padding: 5px 0 5px 5px;
}
.sec04 .inner .loc{
width: 30%;
float:left;
margin:1%;
}
.sec04 .inner .loc p{
font-size:110%;
line-height: 1.7;
}
.booking_place{
position: relative;
}
.booking_place .booking_free{
position: absolute;
top:12%;
left:22%;
width:13%;
}
.booking_btn {
display: inline-block;
width: 60%;
margin:7% auto;
margin-left:20%;
text-align: center;
text-decoration: none;
line-height: 60px;
outline: none;
font-size:110%;
box-shadow: 0px 0px 0px 7px #ed6d35;
border: solid 1px white;
color: #fff;
background-color: #ed6d35;
-webkit-transition: all .3s;
transition: all .3s;
}
.booking_btn:hover {
transform: scale(1.1,1.1);
}
/* Sec04
***************************************************************/
/* Sec04 sp
***************************************************************/
@media all and (max-width: 680px) {
.sec04 {
background:#fff;
padding: 50px 0 20px;
}
.sec04 .inner {
width: 100%;
margin: auto;
}
.loc-title{
width:100%;
font-size:100%;
display: inline-block;
font-weight:bold;
text-align: left;
border-left: solid 5px #000;
margin: 0 5px;
padding: 5px 0 5px 5px;
}
.sec04 .inner .loc{
width:48%;
float:left;
margin:1% 1% 1% 1%;
}
.sec04 .inner .loc p{
font-size:85%;
line-height: 1.7;
}
.booking_place{
position: relative;
}
.booking_place .booking_free{
position: absolute;
top:15%;
left:0%;
width:18%;
}
.booking_btn {
display: inline-block;
width:80%;
margin:7% 10%;
font-size: 100%;
line-height: 40px;
}
}
/* Sec04 sp
***************************************************************/
/* mv
***************************************************************/
/*.mv img{width:100%;
background: url(../../files/img/mv.png) no-repeat bottom center;
background-size: cover;
}*/
.mv .mv_text p{
font-size:80%;
line-height:1.1;
/*margin:0 auto 5% auto;*/
text-align:left;
padding: 0 5% 0 5%;
}
/* 背景画像を持つコンテナ */
.mv {
position: relative;
width: 100%;
/*
height:720px; / コンテナの高さ /
background-image: url('../../files/img/mv.png'); / 背景画像を指定 /
background-size: cover;
background-position: center;
overflow: hidden; / コンテナ外の要素を隠す /
*/
}
.mv img{
width: 100%;
}
/* 動く画像のスタイル */
.moving-image {
position: absolute;
top: 78%; /* 垂直方向の中央 */
transform: translate(-50%, -50%); /* 垂直方向の中央調整 */
width: 385px; /* 画像の幅 */
height: auto; /* 高さは自動 */
animation: float 3s ease-in-out infinite; /* アニメーションを設定 */
}
/* アニメーションの定義 */
@keyframes float {
0% {
transform: translate(-50%, -50%) translateY(0); /* 初期位置 */
}
50% {
transform: translate(-50%, -50%) translateY(-20px); /* 上にふわっと */
}
100% {
transform: translate(-50%, -50%) translateY(0); /* 元の位置に戻る */
}
}
/* 回転を加えたアニメーション */
@keyframes float-and-rotate {
0% {
transform: translate(-50%, -50%) translateY(0) rotate(0deg); /* 初期位置、回転なし */
}
50% {
transform: translate(-50%, -50%) translateY(-20px) rotate(10deg); /* 上にふわっと、少し回転 */
}
100% {
transform: translate(-50%, -50%) translateY(0) rotate(0deg); /* 元の位置に戻る */
}
}
/* 各画像に異なるアニメーションの遅延を設定 */
.image1 {
left: 10%; /* 1枚目の画像位置 */
animation-delay: 0s; /* すぐに動く */
}
.image2 {
left: 35%; /* 2枚目の画像位置 */
animation: float-and-rotate 3s ease-in-out infinite; /* 回転するアニメーションを適用 */
animation-delay: 0.5s; /* 0.5秒遅れて動く */
}
.image3 {
left: 60%; /* 3枚目の画像位置 */
animation-delay: 1s; /* 1秒遅れて動く */
}
.popup-banner {
padding: 20px;
overflow: hidden;
position: relative;
align-items: center;
justify-content: center;
position: fixed;
bottom: 20px;
right: 10px;
width: 270px;
/* box-shadow: 0 4px 8px rgba(0,0,0,0.1);*/
z-index:999;
}
.target {
display: block;
max-width: 300px;
width: 60%;
height: auto;
}
/* Animation */
.target {
animation: floating-y 1.1s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
0% {
transform: translateY(-2%);
}
100% {
transform: translateY(2%);
}
}
.popup-banner img {
width: 100%;
height: auto;
}
.close-button5 {
position: absolute;
top: 5px;
right: 5px;
background: none;
border: none;
font-size: 20px;
cursor: pointer;
padding: 0;
color:#fff;
}
@media all and (max-width: 680px) {
.mv .mv_text p{
font-size:70%;
line-height: 1;
text-align:left;
}
/* 背景画像を持つコンテナ */
.mv {
width: 100%!important;
/*
height: 385px;
background-image: url('../../files/img/mv_sp.png'); / 背景画像を指定 /
*/
}
/* 動く画像のスタイル */
.moving-image {
position: absolute;
top: 87%; /* 垂直方向の中央 */
transform: translate(-50%, -50%); /* 垂直方向の中央調整 */
width: 110px; /* 画像の幅 */
height: auto; /* 高さは自動 */
animation: float 3s ease-in-out infinite; /* アニメーションを設定 */
}
/* アニメーションの定義 */
@keyframes float {
0% {
transform: translate(-50%, -50%) translateY(0); /* 初期位置 */
}
50% {
transform: translate(-50%, -50%) translateY(-20px); /* 上にふわっと */
}
100% {
transform: translate(-50%, -50%) translateY(0); /* 元の位置に戻る */
}
}
/* 回転を加えたアニメーション */
@keyframes float-and-rotate {
0% {
transform: translate(-50%, -50%) translateY(0) rotate(0deg); /* 初期位置、回転なし */
}
50% {
transform: translate(-50%, -50%) translateY(-20px) rotate(10deg); /* 上にふわっと、少し回転 */
}
100% {
transform: translate(-50%, -50%) translateY(0) rotate(0deg); /* 元の位置に戻る */
}
}
/* 各画像に異なるアニメーションの遅延を設定 */
.image1 {
left: 15%; /* 1枚目の画像位置 */
animation-delay: 0s; /* すぐに動く */
}
.image2 {
left: 50%; /* 2枚目の画像位置 */
animation: float-and-rotate 3s ease-in-out infinite; /* 回転するアニメーションを適用 */
animation-delay: 0.5s; /* 0.5秒遅れて動く */
}
.image3 {
left: 85%; /* 3枚目の画像位置 */
animation-delay: 1s; /* 1秒遅れて動く */
}
.top-zone03 {
width: 100%;
height: 200px!important;
background: url(../img/work_img_sp.jpg) center center repeat-x;
background-size: auto ;
position: relative;
overflow: hidden;
-webkit-animation: fadeAnimations 7000s linear infinite !important;
-moz-animation: fadeAnimations 7000s linear infinite !important;
-ms-animation: fadeAnimations 7000s linear infinite!important;
animation: fadeAnimations 12000s linear infinite!important;
}
@-webkit-keyframes fadeAnimations {
0% {
background-position:0 center;
}
100% {
background-position:44400% center;
}
}
@-moz-keyframes fadeAnimations {
0% {
background-position:0 center;
}
100% {
background-position:44400% center;
}
}
@-ms-keyframes fadeAnimations {
0% {
background-position:0 center;
}
100% {
background-position:44400% center;
}
}
@keyframes fadeAnimations {
0% {
background-position:0 center;
}
100% {
background-position:44400% center;
}
}
}
/* mv
***************************************************************/
/* tochi
***************************************************************/
.tochi_bg{
background:#F7F7F7;
}
/*
.secTochi .table1 th{
width: 0%;
padding: 1%;
border-right:thin solid gray ;
background: #f5f5f5;
vertical-align: middle;
}
.secTochi .table1 td{
width: 100%;
padding: 2% ;
}
.secTochi .table2{
width:100%;
margin-bottom: 1%;
border-collapse: separate;
border-spacing: 0px 10px;
}
.secTochi .table2 tr{
width: 100%;
}
.secTochi .table2 th{
width: 21%;
padding: 2%;
text-align: center;
font-size: 15px;
font-weight: 700;
border-bottom:dotted thin gray;
border-right:dotted thin gray;
background: #fff;
}
.secTochi .table2 td{
width: 75%;
padding:2%;
font-size: 14px;
border-bottom:dotted thin gray;
}
.secTochi .leftside{
float:left;
width:48%;
margin:0 1% 0 0;
}
.secTochi .rightside{
float: right;
width:50%;
margin:0 0 0 1%;
}
.secTochi .tochiList li {
width: 100%;
margin:0 0 3% 0;
display: inline-block;
}
.secTochi .tochiList li img {
width: 100%;
}
.secBusiness .tochiList li p {
text-align: center;
font-size: 18px;
line-height: 2;
}
.secTochi .tochiList2 li {
width: 100%;
margin:0 0 3% 0;
display: inline-block;
}
.secTochi .tochiList2 li img {
width: 100%;
}
.secBusiness .tochiList2 li p {
text-align: center;
font-size: 18px;
line-height: 2;
}
.secTochi .tochiList3 li {
width: 49%;
margin:0 0 3% 0;
display: inline-block;
}
.secTochi .tochiList3 li img {
width: 100%;
}
.secBusiness .tochiList3 li p {
text-align: center;
font-size: 18px;
line-height: 2;
}
.secTochi .tochiList4 li {
width: 100%;
margin:0 0 2% 0;
display: inline-block;
}
.secTochi .tochiList4 li img {
width: 100%;
}
.secTochi .tochiList4 li p {
text-align: left;
font-size: 15px;
line-height: 1.2;
}
.secTochi .safety01 {
width: 44%;
margin: 2% 2.5% 3% 2.5%;
display: inline-block;
padding: 1%;
background: #fffacd;
}
.secTochi .safety01 h1{
font-size: 140%;
text-align: center;
margin:2% 0 5% 0;
}
.secTochi .safety01 p{
font-size: 100%;
text-align: left;
line-height: 1.8;
}
.secTochi .safety01 img{
width: 100%;
margin: 0 0 2% 0;
}
*/
#lightbox {
margin-top: 2%;
}
/*#lightbox .lb-container { padding: 3px; }*（lb-containerは白い枠線）*/
@media all and (min-width: 681px) {
}
@media all and (max-width: 680px) {
.secTochi {
padding: 2% 0 10% 0;
}
.secTochi .inner {
width: 96%;
padding: 0 2% 0 2%;
}
.secTochi h1{
font-size:14px;
margin-bottom: 2%;
text-align: left;
}
.secTochi h4{
font-size:15px;
margin-bottom: 2%;
}
.secTochi h5{
font-size:15px;
margin-bottom: 2%;
}
.secTochi .tochi_text {
width: 100%;
margin:0 auto 4% auto;
}
.secTochi .tochi_text p{
font-size:14px;
line-height: 2;
}
.secTochi .tochi_text2 {
width: 100%;
}
.secTochi .tochi_text2 p{
font-size:11px!important;
line-height: 1;
text-align: right;
}
.secTochi .tochi_text3 p{
font-size:14px;
line-height: 1;
margin:0 auto 5% auto;
text-align: center;
}
.secTochi .concept{
width: 100%;
margin: 0 0 5% 0;
}
.secTochi .concept h1{
font-size: 140%;
font-weight: 600;
line-height: 1.5;
margin-bottom: 3%;
padding-left: 5%;
border-left:solid black 8px;
}
.secTochi .concept p{
font-size: 90%;
font-weight: 500;
line-height: 1.8;
text-align: center;
}
.secTochi .concept p.kome{
font-size:70%;
margin-bottom: 2%;
text-align: right;
}
.secTochi .concept .leftside_concept{
float:left;
width:100%;
margin:0 0 3% 0;
}
.secTochi .concept .rightside_concept{
float: right;
width:100%;
margin:0 0 0 0;
}
.secTochi .table1{
width:100%;
margin-top: 1%;
border:thin solid gray ;
font-size: 14px;
}
.secTochi .table1 tr{
width: 100%;
}
.secTochi .table1 th{
width: 100%;
display: inline-block;
/*margin-bottom: 1.5%;*/
padding: 2% 0 1% 2%;
border-right:thin solid gray ;
vertical-align: middle;
font-size: 16px;
}
.secTochi .table1 td{
width: 100%;
/*margin: 0 3% 0 3%;*/
display: inline-block;
/*margin-bottom: 1.5%;*/
padding: 2%;
}
.secTochi .table2{
width:100%;
margin-bottom: 1%;
border-collapse: separate;
border-spacing: 0px 0px;
}
.secTochi .table2 tr{
width: 100%;
}
.secTochi .table2 th{
width: 25%;
display: inline-block;
padding: 1%;
text-align: left;
font-size: 13px;
font-weight: 700;
border-bottom:none;
}
.secTochi .table2 td{
width: 75%;
display: inline-block;
padding:2%;
font-size: 13px;
border-bottom:none;
border-right: none;
}
.secTochi .leftside{
float:center;
width:100%;
margin:0 0 2% 0;
}
.secTochi .rightside{
float:center;
width:100%;
margin:0 0 2% 0;
}
.secTochi .tochiList li{
width:100%;
margin:0 auto 3% auto;
display: inline-block;
}
.secTochi .tochiList li img {
width: 100%;
}
.secTochi .tochiList li p {
font-size: 14px;
}
.secTochi .tochiList2 li {
width: 100%;
margin:0 0 3% 0;
display: inline-block;
}
.secTochi .tochiList2 li img {
width: 100%;
}
.secBusiness .tochiList2 li p {
text-align: center;
font-size: 14px;
line-height: 2;
}
.secTochi .tochiList3 li {
width: 49%;
margin:0 0 3% 0;
display: inline-block;
}
.secTochi .tochiList3 li img {
width: 100%;
}
.secTochi .tochiList4 li {
width: 100%;
margin:0 0 3% 0;
display: inline-block;
}
.secTochi .tochiList4 li p {
text-align: left;
font-size: 14px;
line-height: 1.2;
}
.secTochi .safety01 {
width: 90%;
margin: 2% 5% 3% 5%;
display: inline-block;
padding: 2%;
}
.secTochi .safety01 h1{
font-size: 100%;
text-align: center;
margin:2% 0 5% 0;
}
.secTochi .safety01 p{
font-size: 80%;
text-align: left;
line-height: 1.5;
}
.secTochi .safety01 img{
width: 100%;
margin: 0 0 2% 0;
}
}
/* tochi
***************************************************************/
/* model_merit
***************************************************************/
.model_merit .inner {
width: 1000px;
margin: auto;
position: relative;
z-index: 1;
}
.model_merit {
background:#232946;
padding: 50px 0 20px;
}
.model_merit .inner {
width: 1000px;
margin: auto;
}
.model_merit_point{
width:100%;
margin: 1% 0;
border:thin solid gray ;
font-size: 14px;
}
.model_merit2 {
background:#fff;
padding: 50px 0 20px;
}
.model_merit2 .inner {
width: 1000px;
margin: auto;
}
.model_merit2 .merit_text p{
font-size:26px;
line-height: 2;
margin:1% auto 2% auto;
text-align: center;
font-weight:600;
background:#232946 ;
color:#fff;
padding: 1% 0 1% 0;
}
.accordion-container .accordion-merit_title {
display: block;
position: relative;
width:70%;
margin: 0 auto;
padding: 0.8em 0.625em 0.8em 2em;
font-size: 25px;
font-weight: bold;
color: #000;
background: #fff;
cursor: pointer;
text-align: center;
}
.accordion-container .accordion-merit_title:hover,
.accordion-container .accordion-merit_title:active,
.accordion-container .content-entry.open .accordion-merit_title {
background-color:#ffff00;
color:#000000;
}
.accordion-container .accordion-merit_title:hover i:before,
.accordion-container .accordion-merit_title:hover i:active,
.accordion-container .content-entry.open i {
color: #000000;
}
.accordion-merit_title{
position: relative;
margin:0 auto;
}
.accordion-merit_title:after {
content: "";
position: absolute;
right:50px;
top: 38%;
transition: all 0.2s ease-in-out;
display: block;
width:12px;
height:12px;
border-top: solid 2px #232946;
border-right: solid 2px #232946;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.accordion-merit_title.open:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 45%;
}
.accordion-container .accordion-merit_title2 {
display: block;
position: relative;
width:70%;
margin: 0 auto;
padding: 0.8em 0.625em 0.8em 2em;
font-size: 25px;
font-weight: bold;
color: #232946;
background: #fff;
cursor: pointer;
text-align: center;
border: 1px #232946 solid;
}
.accordion-container .accordion-merit_title2:hover,
.accordion-container .accordion-merit_title2:active,
.accordion-container .content-entry.open .accordion-merit_title {
background-color:#ffff00;
color:red;
}
.accordion-container .accordion-merit_title2:hover i:before,
.accordion-container .accordion-merit_title2:hover i:active,
.accordion-container .content-entry.open i {
color: #000000;
}
.accordion-merit_title2{
position: relative;
margin:0 auto;
}
.accordion-merit_title2:after {
content: "";
position: absolute;
right:50px;
top: 38%;
transition: all 0.2s ease-in-out;
display: block;
width:12px;
height:12px;
border-top: solid 2px #232946;
border-right: solid 2px #232946;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.accordion-merit_title2 .open:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 45%;
}
.model_merit_point2 li{
width:31.9%;
margin: 1% 0.5% 3% 0.5%;
border:thin solid gray ;
font-size: 14px;
display: inline-block;
background: #ffffff;
}
.kome{
font-size:13px;
/*color:#ffffff;*/
margin-bottom: 10px;}
@media all and (max-width: 680px) {
.model_merit .inner {
width: 100%;
margin: auto;
position: relative;
z-index: 1;
}
.model_merit {
background:#232946;
padding: 3px 0 20px;
}
.model_merit .inner {
width: 100%;
margin: auto;
}
.model_merit2 {
background:#fff;
padding: 3px 0 20px;
}
.model_merit2 .inner {
width: 96%;
margin: auto 2% auto 2%;
}
.model_merit2 .merit_text p{
font-size:14px;
line-height: 1;
margin:1% auto 2% auto;
text-align: center;
}
.model_merit_point{
width:96%;
margin: 1% auto;
border:thin solid gray ;
font-size: 14px;
}
.accordion-container .accordion-merit_title {
display: block;
position: relative;
width:96%;
margin: 0 auto;
padding: 0.8em 0.625em 0.8em 2em;
font-size: 13px;
font-weight: bold;
color: #000;
background: #fff;
cursor: pointer;
text-align: center;
}
.accordion-container .accordion-merit_title:hover,
.accordion-container .accordion-merit_title:active,
.accordion-container .content-entry.open .accordion-merit_title {
background-color:#ffff00;
color:#000000;
}
.accordion-container .accordion-merit_title:hover i:before,
.accordion-container .accordion-merit_title:hover i:active,
.accordion-container .content-entry.open i {
color: #000000;
}
.accordion-merit_title{
position: relative;
margin:0 auto;
}
.accordion-merit_title:after {
content: "";
position: absolute;
right:10px;
top: 38%;
transition: all 0.2s ease-in-out;
display: block;
width:12px;
height:12px;
border-top: solid 2px #232946;
border-right: solid 2px #232946;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.accordion-merit_title.open:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 45%;
}
.accordion-container .accordion-merit_title2 {
display: block;
position: relative;
width:100%;
margin: 0 auto;
padding: 0.8em 0.625em 0.8em 2em;
font-size: 13px;
font-weight: bold;
color: #000;
background: #fff;
cursor: pointer;
text-align: center;
}
.accordion-container .accordion-merit_title2:hover,
.accordion-container .accordion-merit_title2:active,
.accordion-container .content-entry.open .accordion-merit_title2 {
background-color:#ffff00;
color:#000000;
}
.accordion-container .accordion-merit_title2:hover i:before,
.accordion-container .accordion-merit_title2:hover i:active,
.accordion-container .content-entry.open i {
color: #000000;
}
.accordion-merit_title2{
position: relative;
margin:0 auto;
}
.accordion-merit_title2:after {
content: "";
position: absolute;
right:10px;
top: 38%;
transition: all 0.2s ease-in-out;
display: block;
width:12px;
height:12px;
border-top: solid 2px #232946;
border-right: solid 2px #232946;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.accordion-merit_title2.open:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 45%;
}
.model_merit_point2 li{
width:98%;
margin: 1% 0.5% 3% 0.5%;
border:thin solid gray ;
font-size: 14px;
display: inline-block;
background: #ffffff;
}
.kome{
font-size:10px;
/*color:#ffffff;*/
margin-bottom: 3%;}
}
/* model_merit
***************************************************************/
/* arrow
***************************************************************/
.arrowbun .inner {
width: 1000px;
margin: auto;
position: relative;
z-index: 1;
}
.arrowbun .listTextBox{
width:44%;
margin:0 2% 0 2%;
display: inline-block;
}
.arrowbun .listTextBox a{
/*padding: 20px 18px 0;*/
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
/*width: 330px;*/
height: 50px;
background: #335167;
padding: 1px 0 1px 0;
-webkit-transition: background 0.3s;
transition: background 0.3s;
/*margin: 2% auto;*/
border-radius: 10px;
}
.arrowbun .listTextBox a::after {
border: 1px solid #335167;
background: #fff;
}
.arrowbun .listTextBox2{
width:44%;
margin:0 2% 0 2%;
display: inline-block;
}
.arrowbun .listTextBox2 a{
/*padding: 20px 18px 0;*/
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
/*width: 330px;*/
height: 50px;
background: #ed6d35;
padding: 1px 0 1px 0;
-webkit-transition: background 0.3s;
transition: background 0.3s;
/*margin: 2% auto;*/
border-radius: 10px;
}
.arrowbun .listTextBox2 a::after {
border: 1px solid #ed6d35;
background: #fff;
}
.arrowbun .listTextBox3{
width:100%;
margin-top:1%;
}
.arrowbun .listTextBox3 a{
/*padding: 20px 18px 0;*/
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
/*width: 330px;*/
height: 40px;
background: #335167;
padding: 1px 0 1px 0;
-webkit-transition: background 0.3s;
transition: background 0.3s;
/*margin: 2% auto;*/
border-radius: 10px;
}
.arrowbun .listTextBox3 a::after {
border: 1px solid #335167;
background: #fff;
}
.arrowbun .arrow {
display: block;
position: relative;
width: 48px;
height: 48px;
/*border-radius: 50%;*/
background: #335167;
-webkit-transition: background 0.3s;
transition: background 0.3s;
border-radius: 15px;
}
.arrowbun .arrow::before, .arrowbun .arrow::after {
content: '';
position: absolute;
height: 1px;
background: #fff;
-webkit-transition: right 0.3s;
transition: right 0.3s;
}
.arrowbun .arrow::before {
width: 18px;
top: 50%;
right: calc((100% - 18px)/2);
}
.arrowbun .arrow::after {
width: 7px;
top: calc((100% - 5px)/2);
right: calc((100% - 21px)/2);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.arrowbun .listTitle {
width: calc(100% - 58px);
padding-left: 18px;
display: block;
font-size: 16px;
font-weight: 500;
color: #fff;
/* margin-bottom: 6px;*/
}
.arrowbun .listTitle::after {
color: #335167;
}
.arrowbun .arrow2 {
display: block;
position: relative;
width: 48px;
height: 48px;
/*border-radius: 50%;*/
background: #ed6d35;
-webkit-transition: background 0.3s;
transition: background 0.3s;
border-radius: 15px;
}
.arrowbun .arrow2::before, .arrowbun .arrow2::after {
content: '';
position: absolute;
height: 1px;
background: #fff;
-webkit-transition: right 0.3s;
transition: right 0.3s;
}
.arrowbun .arrow2::before {
width: 18px;
top: 50%;
right: calc((100% - 18px)/2);
}
.arrowbun .arrow2::after {
width: 7px;
top: calc((100% - 5px)/2);
right: calc((100% - 21px)/2);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.arrowbun .listTitle2 {
width: calc(100% - 58px);
padding-left: 18px;
display: block;
font-size: 16px;
font-weight: 500;
color: #fff;
/* margin-bottom: 6px; */
}
.arrowbun .listTitle2::after {
color: #ed6d35;
}
.arrowbun .arrow3 {
display: block;
position: relative;
width: 58px;
height: 38px;
/*border-radius: 50%;*/
background: #335167;
-webkit-transition: background 0.3s;
transition: background 0.3s;
border-radius: 15px;
}
.arrowbun .arrow3::before, .arrowbun .arrow3::after {
content: '';
position: absolute;
height: 1px;
background: #fff;
-webkit-transition: right 0.3s;
transition: right 0.3s;
}
.arrowbun .arrow3::before {
width: 18px;
top: 50%;
right: calc((100% - 18px)/2);
}
.arrowbun .arrow3::after {
width: 7px;
top: calc((100% - 5px)/2);
right: calc((100% - 21px)/2);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.arrowbun .listTitle3 {
width: calc(100% - 58px);
padding-left: 18px;
display: block;
font-size: 16px;
font-weight: 500;
color: #fff;
/* margin-bottom: 6px;*/
}
.arrowbun .listTitle3::after {
color: #335167;
}
.sale{font-size:16px;
border: 1px solid red;
width:100px;
padding:10px;
color:red;
}
@media all and (min-width: 681px) {
.arrowbun {
margin: 0 30px 10px 0;
}
.arrowbun .listTextBox a:hover{
border: 1px solid #335167;
background: #fff;
}
.arrowbun .listTextBox a:hover::before, .arrowbun a:hover .listTextBox::after {
background: #335167;
}
.arrowbun .listTextBox2 a:hover{
border: 1px solid #ed6d35;
background: #fff;
}
.arrowbun .listTextBox2 a:hover::before, .arrowbun a:hover .listTextBox::after {
background: #ed6d35;
}
.arrowbun .listTextBox3 a:hover{
border: 1px solid #335167;
background: #fff;
}
.arrowbun .listTextBox3 a:hover::before, .arrowbun a:hover .listTextBox::after {
background: #335167;
}
.arrowbun a:hover .arrow {
background: #fff;
}
.arrowbun a:hover .arrow::before, .arrowbun a:hover .arrow::after {
background: #335167;
}
.arrowbun a:hover .arrow::before {
right: calc((100% - 37px)/2);
}
.arrowbun a:hover .arrow::after {
right: calc((100% - 40px)/2);
}
.arrowbun a:hover .arrow2 {
background: #fff;
}
.arrowbun a:hover .arrow2::before, .arrowbun a:hover .arrow2::after {
background:#ed6d35;
}
.arrowbun a:hover .arrow2::before {
right: calc((100% - 37px)/2);
}
.arrowbun a:hover .arrow2::after {
right: calc((100% - 40px)/2);
}
.arrowbun a:hover .arrow3 {
background: #fff;
}
.arrowbun a:hover .arrow3::before, .arrowbun a:hover .arrow3::after {
background: #335167;
}
.arrowbun a:hover .arrow3::before {
right: calc((100% - 37px)/2);
}
.arrowbun a:hover .arrow3::after {
right: calc((100% - 40px)/2);
}
.arrowbun a:hover .listTitle{
color: #335167;
}
.arrowbun a:hover .listTitle::before, .arrowbun a:hover .listTitle::after {
color: #fff;
}
.arrowbun a:hover .listTitle2{
color: #ed6d35;
}
.arrowbun a:hover .listTitle2::before, .arrowbun a:hover .listTitle2::after {
color: #fff;
}
.arrowbun a:hover .listTitle3{
color: #335167;
}
.arrowbun a:hover .listTitle3::before, .arrowbun a:hover .listTitle3::after {
color: #fff;
}
}
@media all and (max-width: 680px) {
.arrowbun {
padding: 0 0 2%;
}
.arrowbun .inner {
width: 93.75%;
}
.arrowbun .listTextBox{
width:80%;
margin:2% 10% 2% 10%;
display: inline-block;
}
.arrowbun .listTextBox a{
/*width: 80%; */
height:40px;
}
.arrowbun .listTextBox2{
width:80%;
margin:2% 10% 2% 10%;
display: inline-block;
}
.arrowbun .listTextBox2 a{
/*width: 80%; */
height:40px;
}
.arrowbun .listTextBox3{
width:80%;
margin:2% 10% 2% 10%;
display: inline-block;
}
.arrowbun .listTextBox3 a{
/*width: 80%; */
height:40px;
}
.arrowbun .arrow {
width: 38px;
height: 38px;
/*background: #fff;
border-radius: 50%;*/
}
.arrowbun .arrow::before {
width: 10px;
right: calc((100% - 10px)/2);
}
.arrowbun .arrow::after {
width: 5px;
top: calc((100% - 3px)/2);
right: calc((100% - 11px)/2);
}
.arrowbun .listTitle {
width: calc(100% - 38px);
padding-left: 10px;
font-size: 14px;
}
.arrowbun .listTitle .jp {
font-size: 14px;
margin-bottom: 4px;
}
.arrowbun .arrow2 {
width: 38px;
height: 38px;
/*background: #fff;
border-radius: 50%;*/
}
.arrowbun .arrow2::before {
width: 10px;
right: calc((100% - 10px)/2);
}
.arrowbun .arrow2::after {
width: 5px;
top: calc((100% - 3px)/2);
right: calc((100% - 11px)/2);
}
.arrowbun .listTitle2 {
width: calc(100% - 38px);
padding-left: 10px;
font-size: 14px;
}
.arrowbun .listTitle2 .jp {
font-size: 14px;
margin-bottom: 4px;
}
.arrowbun .arrow3 {
width: 38px;
height: 38px;
/*background: #fff;
border-radius: 50%;*/
}
.arrowbun .arrow3::before {
width: 10px;
right: calc((100% - 10px)/2);
}
.arrowbun .arrow3::after {
width: 5px;
top: calc((100% - 3px)/2);
right: calc((100% - 11px)/2);
}
.arrowbun .listTitle3 {
width: calc(100% - 38px);
padding-left: 10px;
font-size: 14px;
}
.arrowbun .listTitle3 .jp {
font-size: 14px;
margin-bottom: 4px;
}
}
/* arrow
***************************************************************/
/*アコーディオンCSS
***************************************************************/
.secCreate {
padding: 20px 0 100px;
}
.secCreate .inner {
width: 1000px;
margin: auto;
}
.secCreate h1{
font-size:20px;
margin-bottom: 2%;
text-align: left;
}
.secCreate .create_text {
width: 100%;
/* margin:2% auto;*/
}
.secCreate .create_text p{
font-size:15px;
line-height: 2;
margin:0 auto 0 auto;
}
.secCreate .create_text2 p{
font-size:20px;
line-height: 2.5;
margin:0 auto 0 auto;
text-align: center;
color:red;
background: yellow;
font-weight: 600;
}
.secCreate .boxbox{
align-items: stretch;
display: flex;
}
.secCreate .mimodel{
width:47.5%;
margin: 1% 1% 2% 1%;
display: inline-block;
border: 1px gray solid;
padding: 1%;
}
.secCreate .mimodel h1{
font-size: 18px;
line-height: 1.5;
}
.secCreate .mimodel h2{
font-size: 16px;
line-height: 2;
font-weight: 600;
text-align: center;
}
.secCreate .mimodel h5{
font-size: 15px;
line-height: 2;
font-weight: 600;
color: red;
background: yellow;
padding: 0.5% 4% 0.5% 4%;
bottom:0;
right:0;
position: absolute;
}
.secCreate .mimodel p{
font-size: 15px;
}
.secCreate .mimodel .day{
font-size: 15px;
color: red;
line-height: 1.5;
}
.secCreate .mimodel .day span{
font-size: 15px;
color: #fff;
line-height: 1.5;
background: #0b419b;
margin-left: 1%;
padding:0.5% 2% 1% 2%;
}
.secCreate .mimodel .day2{
width:100%;
font-size: 110%;
color: red;
line-height: 1.5;
background: yellow;
margin-bottom: 1%;
padding:1% 2% 1% 2%;
text-align: center;
}
.secCreate .mimodel .fix{
position: relative;
}
.secCreate .mimodel dl{
width: 100%;
}
.secCreate .mimodel dt{
width: 25%;
padding: 1% 0 1% 0;
text-align: center;
display: inline-block;
font-size:15px;
border-bottom:1px gray dotted ;
border-right:1px gray dotted ;
}
.secCreate .mimodel dd{
width: 72%;
padding: 1% 0 1% 2%;
display: inline-block;
font-size:15px;
border-bottom:1px gray dotted ;
}
.accordion-container {
position: relative;
width: 100%;
/*border: 1px solid #0079c1;*/
border-top: none;
outline: 0;
/*cursor: pointer；*/
}
.accordion-container .accordion-title {
display: block;
position: relative;
margin: 0;
/*padding: 0.625em 0.625em 0.625em 2em;*/
padding: 2em 2em 2em 4em;
font-size: 20px;
font-weight: normal;
color: #fff;
background: #000;
cursor: pointer;
text-align: center;
}
.accordion-container .accordion-title:hover,
.accordion-container .accordion-title:active,
.accordion-container .content-entry.open .accordion-title {
background-color: #335167;
color: white;
}
.accordion-container .accordion-title:hover i:before,
.accordion-container .accordion-title:hover i:active,
.accordion-container .content-entry.open i {
color: white;
}
.accordion-title{
position: relative;
}
.accordion-title:after {
content: "";
position: absolute;
right: 25px;
top: 38%;
transition: all 0.2s ease-in-out;
display: block;
width: 8px;
height: 8px;
border-top: solid 2px #fff;
border-right: solid 2px #fff;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.accordion-title.open:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 45%;
}
.accordion-content {
display: none;
padding:1.5% 0 1.5% 0;
}
/* CSS for CodePen */
.accordion-container {
width: 100%;
margin: 1.875em auto;
}
@media all and (min-width: 681px) {
}
@media all and (max-width: 680px) {
.secCreate {
padding: 2% 0 10% 0;
}
.secCreate .inner {
width: 94%;
padding: 0 3% 0 3%;
}
.secCreate h1{
font-size:16px;
margin-bottom: 2%;
text-align: left;
}
.secCreate .create_text {
width: 100%;
margin:0 auto 4% auto;
}
.secCreate .create_text p{
font-size:14px;
line-height: 2;
}
.secCreate .create_text2 p{
font-size:16px;
line-height: 2;
}
.secCreate .boxbox{
align-items: stretch;
display: block;
}
.secCreate .mimodel{
width:100%;
margin: 1% 0 2% 0;
display: inline-block;
}
.secCreate .mimodel h1{
font-size: 16px;
line-height: 1.5;
}
.secCreate .mimodel h2{
font-size: 3vw;
line-height: 2;
font-weight: 600;
text-align: center;
}
.secCreate .mimodel h5{
font-size: 15px;
position: relative;
text-align: center;
}
.secCreate .mimodel p{
font-size: 14px;
}
.secCreate .mimodel .day{
font-size: 14px;
line-height: 1.5;
}
.secCreate .mimodel .day span{
font-size: 14px;
line-height: 1.5;
margin-left: 1%;
padding:0.5% 2% 1% 2%;
}
.secCreate .mimodel dl{
width: 100%;
}
.secCreate .mimodel dt{
width: 25%;
padding: 1% 0 1% 0;
text-align: center;
display: inline-block;
font-size:14px;
}
.secCreate .mimodel dd{
width: 72%;
padding: 1% 0 1% 2%;
display: inline-block;
font-size:14px;
}
.accordion-container {
position: relative;
width: 100%;
/*border: 1px solid #0079c1;*/
border-top: none;
outline: 0;
/*cursor: pointer；*/
}
.accordion-container .accordion-title {
display: block;
position: relative;
margin: 0;
padding: 1em 0.625em 1em 0.625em;
font-size: 15px;
font-weight: normal;
color: #fff;
background: #000;
cursor: pointer;
text-align: left;
}
.accordion-container .accordion-title:hover,
.accordion-container .accordion-title:active,
.accordion-container .content-entry.open .accordion-title {
background-color: #335167;
color: white;
}
.accordion-container .accordion-title:hover i:before,
.accordion-container .accordion-title:hover i:active,
.accordion-container .content-entry.open i {
color: white;
}
.accordion-title{
position: relative;
}
.accordion-title:after {
content: "";
position: absolute;
right: 15px;
top: 38%;
transition: all 0.2s ease-in-out;
display: block;
width: 8px;
height: 8px;
border-top: solid 2px #fff;
border-right: solid 2px #fff;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.accordion-title.open:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 45%;
}
.accordion-content {
display: none;
padding:1.5% 0 1.5% 0;
}
/* CSS for CodePen */
.accordion-container {
width: 100%;
margin: 1.875em auto;
}
}
/*アコーディオン
***************************************************************/
/* contact
***************************************************************/
.secContact .inner {
width: 1000px;
margin: 1% auto 5% auto;
}
.cf h3{
font-size: 160%;
line-height: 2;
text-align: center;
}
.cf p{
font-size: 110%;
text-align: center;
}
.sheet01{
max-width: 960px;
width:100%;
margin:0 auto 30px auto;
background:#fff;
}
.summary_01{
width:30%;
}
.summary_02{
width:70%;
}
.sheet01 th,
.sheet01 td{
border-bottom:dotted 1px #B5B5B5;
padding:40px 20px 40px;
font-size: 16px;
line-height: 30px;
}
.sheet01 th{
/*background:#F1F9FD;
color:#005BAB;*/
background:#f8fbf8;
font-weight:bold;
width:33%;
text-align:left;
}
.sheet01 td{
width:70%;
text-align:left;
padding:10px 20px;
}
.sheet01 td input{
/*height:25px;*/
padding: 2px;
}
.sheet01 td span2{
color: #dc143c;
}
.sheet01 td select{
height:25px;
}
.sheet01 td input.width200 {
width:200px;
}
.sheet01 td input.width270 {
width:270px;
}
.sheet01 td input.width300 {
width:300px;
}
.sheet01 td input.width360 {
width:360px;
}
.sheet01 td input.width450 {
width:450px;
}
.sheet01 td input.width480 {
width:480px;
}
.sheet01 td li {
float: left;
}
.sheet01 td li:first-child {
margin-right: 5px;
}
.sheet01 td li span {
display: inline-block;
width: 60px;
text-align: right;
margin-right: 0px;
}
.sheet01 td textarea.width120{
width: 120px;
height: 18px;
}
.sheet01 td textarea{
width: 480px;
height: 100px;
}
button {
margin-right: 7px;
background: #0b419b;
color: #fff;
font-weight: bold;
padding: 7px 10px;
font-size: 18px;
display: inline-block;
border: 1px solid #0b419b;
transition: 0.4s;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-ms-transition: 0.4s;
width: 170px;
}
button[type="submit"] {
margin-right: 7px;
background: #0b419b;
color: #fff;
font-weight: bold;
padding: 7px 30px;
font-size: 18px;
display: inline-block;
}
button:hover,
button[type="submit"]:hover {
background: #fff;
color: #0b419b;
}
p.tCenter {
text-align: center;
}
input#name1,
input#name2,
input#kana1,
input#kana2 {
width: 200px;
margin-left: 5px;
}
a.tel_bnr {
display: block;
margin: 0 auto 50px auto;
max-width: 403px;
width: 100%;
}
a.tel_bnr img{
display: block;
width: 100%;
}
.table_a .subtxt {
text-align: center;
margin-bottom: 20px;
font-size: 13px;
line-height: 25px;
}
input#zip1 {
margin-bottom: 7px;
}
textarea.large {
margin-top: 5px;
}
.bt_js_bnr{text-align: center; margin: 60px 0;}
.bt_js_bnr p{margin-top: 10px; }
footer {
margin-top: 0;
}
.linehightshikaku{
line-height:3 ;
margin-left:2%;
}
.linehighthp{
line-height:3 ;
margin-right:1% ;
margin-left:1%
}
.red{
color:red;
}
.arianame{
line-height: 2;
background:#a0a0a0;
color:white;
padding-left:2% ;
margin:3% 0 1% 0 ;
}
.arianame:first-child{
margin-top:0 ;
}
@media screen and (max-width:737px){
.secContact {
padding: 2% 0 10% 0;
}
.secContact .inner {
width: 93.75%;
}
.cf h3{
font-size: 90%;
line-height: 2;
}
.cf p{
font-size: 85%;
}
.summary_01{
width:100%;
}
.summary_02{
width:100%;
}
.sheet01{
width:100%;
padding:0;
margin-bottom:10px;
}
.sheet01 th,
.sheet01 td{
display:block;
/* border-top:solid 1px #B5B5B5;
border-right:solid 1px #B5B5B5;
border-left:solid 1px #B5B5B5;*/
padding:5px;
font-size:85%;
text-align:left;
width: 100%;
box-sizing: border-box;
}
.sheet01 th{
/* background:#F1F9FD;
color:#005BAB;*/
background:#f8fbf8;
font-weight:bold;
text-align:left;
border-top:solid 1px #B5B5B5;
border-bottom: none;
}
input[type=text],
input[type=email],
textarea{
width:100% !important;
padding:3px 0;
box-sizing: border-box;
}
.sheet01 td textarea.width120{
height: 18px;
}
.sheet01 td textarea{
height: 180px;
}
.sheet01 td li {
float: none;
}
input#name1, input#name2, input#kana1, input#kana2 {
width: 170px;
margin-left: 5px;
/*width: 100%!important;*/
box-sizing: border-box;
margin: 0;
}
.sheet01 td li span {
display: inline-block;
width:100%;
text-align: left;
margin-right: 0px;
}
.sheet01 td li:first-child {
margin-right: 0;
}
.table_a table tr td:first-child, .table_a table tr td:last-child {
border-bottom: none;
padding: 15px 10px;
}
.table_a table tr:last-child td:last-child{
border-bottom: 1px solid #0b419b;
}
.sheet01 td input.width300 {
width: 100%;
}
button {
font-size: 15px;
width: 130px;
padding: 7px 10px;
}
button[type="submit"] {
font-size: 15px;
padding: 7px 10px;
}
.bt_js_bnr {
margin: 60px 0 20px 0;
}
a.tel_bnr {
display: block;
margin: 0 auto 30px auto;
max-width: 403px;
width: 85%;
}
}
/* contact
***************************************************************/
/* チェックボックス
***************************************************************/
/*input[type="checkbox"]{
display: none;
}
/ チェックボックスの代わりを成すラベル /
input[type="checkbox"]+label{
display: none;
cursor: pointer;
display: inline-block;
position: relative;
padding-left: 25px;
padding-right: 10px;
}
/ ラベルの左に表示させる正方形のボックス□ /
input[type="checkbox"]+label::before{
content: "";
position: absolute;
display: block;
box-sizing: border-box;
width: 20px;
height: 20px;
margin-top: -10px;
left: 0;
top: 50%;
border: 1px solid;
border-color: #585753; / 枠の色変更 お好きな色を /
background-color: #fff; / 背景の色変更 お好きな色を /
}
/ チェックが入った時のレ点 /
input[type="checkbox"]:checked+label::after{
content: "";
position: absolute;
display: block;
box-sizing: border-box;
width: 18px;
height: 9px;
margin-top: -9px;
top: 50%;
left: 3px;
transform: rotate(-45deg);
border-bottom: 3px solid;
border-left: 3px solid;
border-color: #585753; / チェックの色変更 お好きな色を /
}
input[type="checkbox"]:checked+label::before{
background-color:#ffff00; / 背景の色変更 お好きな色を /
}
*/
/* チェックボックス
***************************************************************/
/*透過*/
.hover{-webkit-transition: .3s;
transition: .3s;}
.hover:hover {
opacity: 0.7;
-khtml-opacity: .70;
-moz-opacity: .70;
filter: alpha(opacity=70);
-ms-filter: "alpha(opacity=70)";
}
.hover img:hover {
filter: alpha(opacity=60);/* IE lt 8 */
-ms-filter: "alpha(opacity=60)"; /* IE 8 */
}
/*透過*/