@charset "utf-8";
html{
overflow-y:scroll;
scroll-behavior: smooth;
text-size-adjust:100%; /*スマホの文字サイズ自動調整無効*/
-webkit-text-size-adjust:100%; /*スマホの文字サイズ自動調整無効 safari用*/
-moz-text-size-adjust: 100%; /*スマホの文字サイズ自動調整無効 Mozilla用*/
-ms-text-size-adjust: 100%; /*スマホの文字サイズ自動調整無効 マイクロソフト用*/
height: 100Vh
width: 100%;
}
/*-----------------------------------------------------------------------*/
/* ページ レイアウト */
/**/
/* .test{...} class="test" 「種別名を割り当てる 」 → 同じclass名を、1ページ中に何度でも使える。 */
/* #test{...} id=""test" 「固有の名前を割り当てる」→ 同じid名は、1ページ中に1度しか使えない*/
/*直接記述する場合 */
/*-----------------------------------------------------------------------*/
body {
/*background-image: url(img/back01.png);*/
background-repeat: repeat-y;/*縦方向にのみ画像を繰り返し*/
background-size: contain;
background-color: #F0F0F0;/*バックの色*/
margin:0px auto 0px auto;
font-family: 'Lato', 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
line-height:1.5em;
word-break:break-all;
font-size:100%;
height: 100Vh
width: 100%;
margin: 0;
box-sizing: border-box;
display: flex;
flex-direction : column; /* 縦向き */
/* scrollbar-width: none;*/
overflow: hidden;/*スクロール禁止*/
-ms-overflow-style: none;/*スクロールバー非表示（IE・Edge）*/
scrollbar-width: none; /*スクロールバー非表示（Firefox）*/
-webkit-overflow-scrolling: touch ;
-webkit-text-size-adjust : 100%!important ; /* iPhon文字がはみ出るときの対処方法*/
}
.body::-webkit-scrollbar{ /*スクロールバー非表示（Chrome・Safari）*/
display:none;
}
.header {
display: flex;
width: 100%;
/* height: 10em;*/
flex-direction : row; /*横に並べる*/
justify-content:space-between;/* 各アイテムを均等に配置し 最初のアイテムは先頭に寄せ、 最後のアイテムは末尾に寄せる */
flex-shrink: 0;/*縮小係数を設定*/
/* background:url(img/topback02.png) repeat-x;
background-size:contain;/*画像を切れくことなく全体表示*/
background:url(img/topback.png) no-repeat center bottom;
background-color: #F0F0F0;
position: fixed;/*で固定した場合*/
top 0px
align-items: start;/*上詰め*/
/* padding:1em 1em 1em 5em;*/
font-size:1.0em;
position: relative;/* 相対位置に要素を配置*/
}
/*HPのレイアウト*/
.mainf{
display: flex;
flex-direction : column; /* 縦向き */
height: 100%;
width: 100%;
box-sizing: border-box;
overflow: hidden;/* スクロール禁止*/
-ms-overflow-style: none;/*IE(Internet Explorer)・Microsoft Edgeへの対応*/
scrollbar-width: none; /*Firefoxへの対応*/
/*Google Chrome、Safariへの対応
.contents_box::-webkit-scrollbar{
display: none;*/
}
/*hedder */
.topf{ /*社名等 固定部品表示用 1段目*/
display: flex;
width: 100%;
/* height: 150px;*/
height: 10em;
flex-direction : row; /*横に並べる*/
justify-content:space-between;/* 各アイテムを均等に配置し 最初のアイテムは先頭に寄せ、 最後のアイテムは末尾に寄せる */
flex-shrink: 0;/*縮小係数を設定*/
/* background:url(img/topback02.png) repeat-x;
background-size:contain;/*画像を切れくことなく全体表示*/
background:url(img/topback.png) no-repeat center bottom;
background-color: #F0F0F0;
position: fixed;/*で固定した場合*/
top 0px
}
.titlebar {
margin:0px;
/* padding:40px 0px 10px 18px;*/
padding:2em 2em 1em 2em;
/* font-size:8pt;*/
font-size:1.2em;
color:#666666;
}
.topf01L{ /*1段目 左*/
background-color: #FFFFF0;
flex-direction : column; /* 縦向き */
/* width: 160px;*/
width: 10em;
/* padding: 10px;ロゴマーク*/
float: left;
}
.top01R{ /*1段目 右*/
float:right;
width: 12em; /*横幅*/
/*padding: 3px; 四方に3px空白を開ける*/
padding: 0.5em; /*四方に3px空白を開ける*/
flex-direction : column; /*縦に並べる*/
vertical-align: text-bottom;
}
.topadd{ /*住所・連絡先*/
font-size:12pt;
/* font-size:1em;*/
line-height:1.15em;
text-decoration:none;
/* padding: 40px;*/
padding: 4rm;
vertical-align: text-bottom;
/* vertical-align: baseline; */
}
.menubuttonf{
display: flex;
}
.contentf{ /*メインコンテンツ
width: 100%;*/
/*flex-grow: 1; 余白に合わせて伸張する*/
/*padding:15px 0 15px 30px;
padding:1.5em 0 1.5em 3em;
*/
overflow: auto;
overflow: scroll;
}
.rettop{/*topに戻る*/
text-align: right;
}
.copy{/*フッター内コピーライト*/
text-align: center;
}
/*menu item*/
.buttonitem{
width: 100%;
/* height: 40px;*/
border-radius: 60% ;
text-align: center;
text-shadow: 5px 5px 5px #4D7064 ;
padding: 5px;
/* font-size: 16px;*/
font-size: 1.6em;
text-decoration:none;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
}
.buttonitem:hover{
background-color: #f4e1c8;
text-decoration:none;
padding: 10px;
/* font-size: 20px;*/
font-size: 2em;
}
/*footer*/
.bottomf{
justify-content: right;
text-align:right;
display: flex;
width: 100%;
/* height: 50px;*/
height: 5em;
}
/*.entry-footer {padding-bottom:5px;border-bottom:1px dotted #666666;margin-bottom:35px;}*/
.entry-footer {padding-bottom:0.5em;border-bottom:0.3em dotted #666666;margin-bottom:3.5em;}
/*-----------------------------------------------------------------------*/
/* ページ内要素標準仕様 */
/*-----------------------------------------------------------------------*/
table{
margin-bottom:10px;
/* font-size:90%;*/
font-size:1.0em;
text-align:center;
width:100vw
}
td {
/* font-size:10pt;
font-size: 1em;*/
line-height:1.3em;
}
a { text-decoration:none;}
a:hover { text-decoration:underline;}
h2 {
text-align: center;
/* font-size:16pt;*/
font-size:1.0em;
line-height:1.4em;
/*background-color: #f4e1c8;*/
background: linear-gradient(140deg ,#f4e1c8,#FFFFFF)
}
h3 {
text-align: left;
/* font-size:12pt;*/
font-size:1.2em;
line-height:2.0em;
/*background-color: #f4e1c8;
background: linear-gradient(140deg ,#f4e1c8,#FFFFFF)*/
}
/*スマホ対応イメージを横幅にあわせる*/
img {
max-width : 100% ;
height : auto ;
}
iframe { width : 100% ; }
p.resizeimage img { width: 100vw; }
/*2枚画像切り替え*/
.myChangeImage2{
position: relative;
/* border : 1px solid;*/
overflow: hidden;
}
.myChangeImage2 img{
position: absolute;
top: 0;
left: 0;
animation: ChangeImage2 10s infinite;/*全体の引き換え時間*/
opacity: 0;
}
@keyframes ChangeImage2{
0%{ opacity: 0;} /*0:非表示1：表示 */
12%{ opacity: 1;} /*フェードイン完了*/
50%{ opacity: 1;} /*画像表示 （次の画像表示開始）3s/18s=16.6*/
62%{ opacity: 0;transform: scale(1.2);} /*画像1枚のフェードアウト*/
100%{ opacity: 0;} /*画像全体の切り替え時間*/
}
.myChangeImage2 img:nth-of-type(1) { animation-delay: 0s; }/*1枚目の画像スタート*/
.myChangeImage2 img:nth-of-type(2) { animation-delay: 5s; }/*２枚目の画像スタート遅延時間*/
/*3枚画像切り替え*/
.myChangeImage3{
position: relative;
display: flex;
justify-content: center;
/* border : 1px solid;
width : 8em;
height : 4.5em;
border : 0.1em solid;*/
overflow: hidden;
}
.myChangeImage3 img{
position: absolute;
top: 0;
left: 0;
animation: ChangeImage3 15s infinite;/*全体の引き換え時間*/
opacity: 0;
}
@keyframes ChangeImage3{
0%{ opacity: 0;}
8%{ opacity: 1;}
34%{ opacity: 1;}
42%{ opacity: 0;transform: scale(1.2);}
100%{ opacity: 0;}
}
.myChangeImage3 img:nth-of-type(1) { animation-delay: 0s; }
.myChangeImage3 img:nth-of-type(2) { animation-delay: 5s; }
.myChangeImage3 img:nth-of-type(3) { animation-delay: 10s; }
/*4枚画像切り替え*/
.myChangeImage4{
position: relative;
overflow: hidden;
}
.myChangeImage4 img{
position: absolute;
top: 0;
left: 0;
animation: ChangeImage4 20s infinite;
opacity: 0;
}
@keyframes ChangeImage4 {
0%{ opacity: 0;}
6%{ opacity: 1;}
25%{ opacity: 1;}
31%{ opacity: 0; transform: scale(1.2); }
100%{ opacity: 0;}
}
.myChangeImage4 img:nth-of-type(1) { animation-delay: 0s; }
.myChangeImage4 img:nth-of-type(2) { animation-delay: 5s; }
.myChangeImage4 img:nth-of-type(3) { animation-delay: 10s; }
.myChangeImage4 img:nth-of-type(4) { animation-delay: 15s; }
/*5枚画像切り替え*/
.myChangeImage5{
position: relative;
overflow: hidden;
}
.myChangeImage5 img{
position: absolute;
top: 0;
left: 0;
animation: ChangeImage5 25s infinite;
opacity: 0;
}
@keyframes ChangeImage5{
0%{ opacity: 0;}
5%{ opacity: 1;}
20%{ opacity: 1;}
25%{ opacity: 0;transform: scale(1.2);}
100%{ opacity: 0;}
}
.myChangeImage5 img:nth-of-type(1) { animation-delay: 0s; }
.myChangeImage5 img:nth-of-type(2) { animation-delay: 5s; }
.myChangeImage5 img:nth-of-type(3) { animation-delay: 10s; }
.myChangeImage5 img:nth-of-type(4) { animation-delay: 15s; }
.myChangeImage5 img:nth-of-type(5) { animation-delay: 20s; }
/*6枚画像切り替え*/
.myChangeImage6{
position: relative;
overflow: hidden;
text-align: center;
}
.myChangeImage6 img{
position: absolute;
top: 0%;
left: 0%;
animation: ChangeImage6 30s infinite;
opacity: 0;
}
@keyframes ChangeImage6{
0%{ opacity: 0;}
4%{ opacity: 1;}
17%{ opacity: 1;}
21%{ opacity: 0;transform: scale(1.2);}
100%{ opacity: 0;}
}
.myChangeImage6 img:nth-of-type(1) { animation-delay: 0s; }
.myChangeImage6 img:nth-of-type(2) { animation-delay: 5s; }
.myChangeImage6 img:nth-of-type(3) { animation-delay: 10s; }
.myChangeImage6 img:nth-of-type(4) { animation-delay: 15s; }
.myChangeImage6 img:nth-of-type(5) { animation-delay: 20s; }
.myChangeImage6 img:nth-of-type(6) { animation-delay: 25s; }
/* =====================================================*/
/* gNavi メニューボタン */
/* =====================================================*/
/* -------------------- */
/* ▼メニューバーの装飾 */
/* -------------------- */
/* 変数の定義 */
.ddmenu {
--ddmenu-nnmoj: #999999; /* バーの背景色() */
--ddmenu-color: #f4e1c8; /* バーの背景色() */
--ddmenu-hover: #ffdddd; /* メニュー項目にマウスが載ったときの背景色 */
--ddmenu-moj; #dd0000; /* メニュー項目にマウスが載ったときの文字色 */
--ddmenu-s-hover: #ffff80; /* サブメニュー項目にマウスが載ったときの背景色 */
--ddmenu-s-moj; #005500; /* サブメニュー項目にマウスが載ったときの文字色 */
display: flex;
flex-wrap: nowrap;
justify-content: center;
}
/* -------------------- */
/* ▼メニューバーの装飾 */
/* -------------------- */
ul.ddmenu {
width: 100%;
margin: 0px; /* メニューバー外側の余白(ゼロ) */
/* padding: 0px 0px 0px 15px;メニューバー内側の余白(左に15px) */
padding: 0px 0px 0px 0px; /* メニューバー内側の余白(左に15px) */
background-color: var(--ddmenu-color);
justify-content:space-between;/* 各アイテムを均等に配置し 最初のアイテムは先頭に寄せ、 最後のアイテムは末尾に寄せる */
}
/* -------------------------- */
/* ▼メインメニュー項目の装飾 */
/* -------------------------- */
ul.ddmenu li {
/* width: 140px; メニュー項目の横幅(125px) */
width: 9em; /* メニュー項目の横幅(１３文字) */
display: inline-block; /* ★1:横並びに配置する */
list-style-type: none; /* ★2:リストの先頭記号を消す */
position: relative; /* ★3:サブメニュー表示の基準位置にする */
}
ul.ddmenu a {
background-color: var(--ddmenu-color); /* メニュー項目の背景色() */
color: var(--ddmenu-nnmoj); /* メニュー項目の文字色() */
/* line-height: 35px; メニュー項目のリンクの高さ(40px) */
line-height: 2em; /* メニュー項目のリンクの高さ(40px) */
text-align: center; /* メインメニューの文字列の配置(中央寄せ) */
text-decoration: none; /* メニュー項目の装飾(下線を消す) */
font-weight: bold; /* 太字にする */
display: block; /* ★4:項目内全域をリンク可能にする */
}
ul.ddmenu a:hover {
background-color:var(--ddmenu-hover); /* メニュー項目にマウスが載ったときの背景色(淡いピンク) */
color: var(--ddmenu-moj); /* メニュー項目にマウスが載ったときの文字色(濃い赤色) */
}
/* ---------------------------------- */
/* ▼サブメニューがある場合に開く処理 */ /* ※サブメニューが2階層以上ある場合の記述 */
/* ---------------------------------- */
ul.ddmenu li:hover > ul {
display: block; /* ★マウスポインタが載っている項目の内部にあるリストを表示する */
}
/* -------------------- */
/* ▼サブメニューの装飾 */
/* -------------------- */
ul.ddmenu ul {
display: none; /* ★1:標準では非表示にする */
margin: 0px; /* ★2:サブメニュー外側の余白(ゼロ) */
padding: 0px; /* ★3:サブメニュー内側の余白(ゼロ) */
position: absolute; /* ★4:絶対配置にする */
bottom: 100%; /*サブメニューを上方向に表示*/
}
/* ---------------------------------- */
/* ▼サブメニューがある場合に開く処理 */ /* ※サブメニューが1階層しか存在しない場合の記述 */
/* ---------------------------------- */
ul.ddmenu li:hover ul {
display: block; /* ★5:マウスポインタが載っている項目の内部にあるリストを表示する */
}
* ------------------------ */
/* ▼サブメニュー項目の装飾 */
/* ------------------------ */
ul.ddmenu ul li { /* ※A */
/* width: 135px; サブメニュー1項目の横幅(135px) */
width: 13em; /* サブメニュー1項目の横幅(135px) */
border-top: 1px solid pink; /* 項目上側の枠線(ピンク色で1pxの実線) */
}
ul.ddmenu ul li a { /* ※B */
/* line-height: 35px; サブメニュー1項目の高さ(35px) */
line-height: 2em; /* サブメニュー1項目の高さ(35px) */
text-align: left; /* 文字列の配置(左寄せ) */
/* padding-left: 5px; 文字列前方の余白(5px) */
padding-left: 0.5em; /* 文字列前方の余白(5px) */
font-weight: normal; /* 太字にはしない */
}
ul.ddmenu ul li a:hover { /* ※C */
background-color: var(--ddmenu-s-hover); /* サブメニュー項目にマウスが載ったときの背景色(淡い黄色) */
color: var(--ddmenu-s-moj); /* サブメニュー項目にマウスが載ったときの文字色(濃い緑色) */
}
/* ----------------------------------- */
/* ▼3階層目以降(孫メニュー以降)の装飾 */ /* ※下ではなく横(右)に表示します。 */
/* ----------------------------------- */
ul.ddmenu ul ul {
margin: 0px; /* ★サブメニュー外側の余白(ゼロ) */
padding: 0px; /* ★サブメニュー内側の余白(ゼロ) */
display: none; /* ★標準では非表示にする */
position: absolute; /* ★絶対配置にする */
top: -1px; /* 1pxだけ上方向にずらす(※上に1pxの枠線を引いている場合) */
left: 100%; /* ★基準位置からの距離を親ボックスの幅100％にする */
border-left: 1px solid pink; /* 左側に引く枠線(*/
}
/*ハンバーガーメニュー*/
.hamburger-menu {
--hm-color: #696969; /* バーの背景色() */
--hm-font-color: #FFF; /*リンクの文字の色*/
}
.hamburger-menu {
width: 50px;
height: 50px;
position: absolute; /*ハンバーガーメニュを画面の右上固定**/
top: 10px;
right: 10px;
border: none;
background: transparent;
appearance: none;
padding: 0;
cursor: pointer;
z-index: 999;
}
.hamburger-menu__bar {
display: inline-block;
width: 54%;
height: 4px;
background: var(--hm-color);;
position: absolute;
left: 30%;
/*transform: translateX(-100%);*/
transition: .8s;
}
.hamburger-menu__bar:first-child {
top: 16px;
}
.hamburger-menu__bar:nth-child(2) {
top: 24px;
}
.hamburger-menu__bar:last-child {
top: 32px;
}
.hamburger-menu--open .hamburger-menu__bar {
top: 50%;
}
.hamburger-menu--open .hamburger-menu__bar:first-child {
transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.hamburger-menu--open .hamburger-menu__bar:last-child {
transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}
.hamburger-menu--open .hamburger-menu__bar:nth-child(2) {
display: none;
}
.navigation {
display: none;
background: #006400;
position: absolute;
top: 100px;
left: 10px;
width: 100%;
z-index: 9999;
font-size:1.1em;
color: #CCC;/*文字の色*/
}
.navigation__list {
text-align: left;
list-style: none;
padding: 0;
margin: 0;
}
.navigation__list-item {
border-bottom: solid 1px #474747;
}
.navigation__list-item:first-child {
border-top: solid 1px #474747;
}
.navigation__link {
color: #fff;
font-weight: 700;
text-decoration: none;
display: block;
padding: 24px 0;
transition: .5s;
}
@media (hover: hover) and (pointer: fine) {
.navigation__link:hover {
background: #AAA;
color: red;
font-style: italic;
}
}
/* ============ 会社概要レイアウト==================== */
.ab-table th{
border: 1px solid #999;
background-color: #ddf;
width: 10em;
}
.ab-table td {
border: 1px solid #999;
text-align:start;
}
/* ============ div realtor内 専用レイアウト==================== */
#realtor .table{
border: 2px solid rgb(140 140 140);
font:
16px "Open Sans",
Helvetica,
Arial,
sans-serif;
}
#realtor .img{
width:300px;
}
#realtor .data{
text-align:start;
}
#realtor .tytle{
text-align:center;
width:100%;
font-size:1.2em;
}
/* ============ div mysoft 内 専用レイアウト==================== */
#mysoft .title{
width:6em;
}
#mysoft .explanation{
width:12em;
}
#mysoft td.Features{/*特徴*/
text-align:start;
font-size:0.9em;
}
/* ============ div link 内 専用レイアウト==================== */
#link .site{
width:15em;
}
#link td.comment{/*コメント*/
text-align:start;
height:3em;
}
/*-----------------------------------------------------------------------*/
/* スマホ対応 */
/*-----------------------------------------------------------------------*/
/* 解像度でフォントサイズを変更 PC 72 DPI
@media screen (max-resolution: 100dpi) {body { font-size:10px; }}
@media screen (min-resolution: 101dpi) and (max-resolution: 200dpi) {body { font-size:13px; }}
@media screen (min-resolution: 201dpi) and (max-resolution: 300dpi) {body { font-size:16px; }}
@media screen (min-resolution: 301dpi) and (max-resolution: 400dpi) {body { font-size:19px; }}
@media screen (min-resolution: 401dpi) and (max-resolution: 500dpi) {body { font-size:30px; }}
@media screen (min-resolution: 501dpi) {body { font-size:40px; }}
*/
/* PC用のCSSはメディアクエリの外に記述する */
@media screen and (max-width: 992px) {
/* 959px以下に適用されるCSS（タブレット用） */
}
/*【iPad 縦向きのみ】*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
}
/*【iPad 横向きのみ】*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape){
}
@media screen and (max-width: 688px) {
/* 480px以下に適用されるCSS（スマホ用）の場合の記述 */
body{
height: 100vh;/*メニューの上部固定*/
font-size: 3.2vmin !important;/*16Px 4.266vw 10 2.666*/
/* font-size: 14px;*/
}
.header { height: 60px;
padding:0.2em 0.5em 0.5em 0.2em;/**/
}
.topf{
background:url(img/common/headimg1.gif) no-repeat left top;
}
#header {
height: 10em;
}
.top01R{
display:none; /*noneその場にない状態となるため、空白も無く詰めて表示されます。*/
}
.top01L{ /*ロゴマーク*/
padding: 10px;
}
.topadd{
visibility:hidden;
/*visible表示 hidden 不可視 領域あり collapse 不可視領域無*/
}
.ddmenu{
/*display:none; noneその場にない状態となるため、空白も無く詰めて表示されます。*/
font-size: 1.3em
}
.menu-btn{visibility:visible;
}
.myChangeImage2{ width : 100%; height : 228px; }
.myChangeImage3{ width : 100%; height : 228px; }
.myChangeImage4{ width : 100%; height : 228px; }
.myChangeImage5{ width : 100%; height : 228px; }
.myChangeImage6{ width : 100%; height : 228px; }
#mysoft .explanation{
width:8em;
}
table{
width:100vw
}
.sm_o{/*スマホのみ表示*/
visibility:visible;
}
.pc_o{/*PCのみ表示*/
display:none; /*noneその場にない状態となるため、空白も無く詰めて表示されます。*/
}
}
@media screen and (min-width: 689px) {/*スマホ以外*/
/* overflow: hidden;スクロール禁止*/
body{
height: 100vh;/*メニューの上部固定*/
}
.header { height: 150px;
padding:0.5em 0.5em 0.5em 0.5em;/**/
}
.hamburger-menu{
/* visibility:hidden; visible表示 hidden 不可視 領域あり collapse 不可視領域無*/
}
.rettop{
display:none; /*noneその場にない状態となるため、空白も無く詰めて表示されます。*/
}
.myChangeImage2{ width : 689px; height : 385px; }
.myChangeImage3{ width : 689px; height : 385px; }
.myChangeImage4{ width : 689px; height : 385px; }
.myChangeImage5{ width : 689px; height : 385px; }
.myChangeImage6{ width : 689px; height : 385px; }
#mysoft .explanation{
width:12em;
}
table{
width:95vw
}
.sm_o{/*スマホのみ表示*/
display:none; /*noneその場にない状態となるため、空白も無く詰めて表示されます。*/
}
.pc_o{/*PCのみ表示*/
visibility:visible;
}
}