@charset "utf-8";
/*-------------------------------------*/
/* 改行 */
/*-------------------------------------*/
/* 画面幅が1024px以上の時は */
@media screen and (min-width: 1024px) {
.ps-br{
display: block; /* PCを改行して */
}
.sp-br{
display: none; /* SPの改行を隠す */
}
}
/* 画面幅が560px以下の時は */
@media screen and (max-width: 560px) {
.ps-br{
display: none; /* PCの改行を隠して */
}
.sp-br{
display: block; /* SPを改行する */
}
}
/*-------------------------------------*/
/* マージン、パディングの調整 */
/*-------------------------------------*/
.m10{ margin: 10px; }
.m_auto{ margin: 0 auto; }
.m0{ margin: 0;}
.mB0{ margin-bottom: 0px; display: block;}
.mB5{ margin-bottom: 5px; display: block;}
.mB10{margin-bottom: 10px; display: block;}
.mB15{margin-bottom: 15px; display: block;}
.mB20{margin-bottom: 20px; display: block;}
.mB30{margin-bottom: 30px; display: block;}
.mT0{ margin-top: 0px; display: block;}
.mT5{ margin-top: 5px; display: block;}
.mT-10{margin-top: -10px; display: block;}
.mT10{margin-top: 10px; display: block;}
.mT15{margin-top: 15px; display: block;}
.mT20{margin-top: 20px; display: block;}
.mT30{margin-top: 30px; display: block;}
.mL5{ margin-left: 5px; display: block;}
.mL10{margin-left: 10px; display: block;}
.mL15{margin-left: 15px; display: block;}
.mL20{margin-left: 20px; display: block;}
.mL30{margin-left: 30px; display: block;}
.mR5{ margin-right: 5px; display: block;}
.mR10{margin-right: 10px; display: block;}
.mR15{margin-right: 15px; display: block;}
.mR20{margin-right: 20px; display: block;}
.mR30{margin-right: 30px; display: block;}
.pB5{ padding-bottom: 5px; display: block;}
.pB10{padding-bottom: 10px; display: block;}
.pB15{padding-bottom: 15px; display: block;}
.pB20{padding-bottom: 20px; display: block;}
.pB30{padding-bottom: 30px; display: block;}
.pT5{padding-top: 5px; display: block;}
.pT10{padding-top: 10px; display: block;}
.pT15{padding-top: 15px; display: block;}
.pT20{padding-top: 20px; display: block;}
.pT30{padding-top: 30px; display: block;}
.pR5{padding-right: 5px; display: block;}
.pR10{padding-right: 10px; display: block;}
.pR15{padding-right: 15px; display: block;}
.pR20{padding-right: 20px; display: block;}
.pR30{padding-right: 30px; display: block;}
.pL10{padding-left: 10px; display: block;}
.pL15{padding-left: 15px; display: block;}
.pL20{padding-left: 20px; display: block;}
.pL30{padding-left: 30px; display: block;}
.pL30_2{padding-left: 30px;}
.p10{padding: 10px;}
.p5{padding:5px;}
.indent {
text-indent: 1em;
}
.indent2 {
margin-left: 3em;
text-indent: -1em;
}
@media screen and (max-width: 640px) {
.pT100_sp{padding-top: 100px; display: block;}
}
@media screen and (max-width: 480px){
.indent {
text-indent: 0;
}
.indent2 {
margin-left: 1em;
text-indent: 0;
}
}
/*-------------------------------------*/
/* コンテンツを左に右に振り分ける */
/*-------------------------------------*/
/* float */
.fL { float : left; display: block; margin-left:10px; }
.fR { float : right; display: block; margin-left:10px; }
@media screen and (max-width: 480px){
.fR, .fL{
float : none;/*floatをnoneで解除*/
margin-bottom : 20px;/*余白*/
text-align : center;
}
}
/* textAlign */
.tC{ text-align: center; display: block;}
.tR{ text-align: right; display: block;}
.tL{ text-align: left; display: block;}
li.yokonarabi{
display: inline;
padding: 0 5px;
}
/*-------------------------------------*/
/* 背景色 */
/*-------------------------------------*/
.bg_w{
background: rgba(255,255,255,0.5);
}
/*-------------------------------------*/
/* 浮動コンテンツのクリア */
/*-------------------------------------*/
.clear{ display: block; clear:both; height:0;}
/*//clearFix Coponents//*/
.clear {clear:both;}
.clearfix{ display:block;}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix:after {
content: url(pixel.gif);
display: block;
clear: both;
height: 0;
}
/*-------------------------------------*/
/*
imgタグを含むタグにクラスとして指定することで、
ロールオーバー時にハイライト表示 ＜白＞
*/
/*-------------------------------------*/
.innerBorderWh a:hover img {
margin: -1px;
border: solid 1px #ccc;
}
/**//* for IE6 *//**/
* html .innerBorderWh a:hover {
zoom: 1;
}
* html .innerBorderWh a:hover img {
/* for BackCompat mode
margin-left: -2px;
margin-right: -2px;
over here */
float: left;
position: relative;
}
/*-------------------------------------*/
/*
imgタグを含むタグにクラスとして指定することで、
ロールオーバー時にハイライト表示 ＜黄色＞
*/
/*-------------------------------------*/
.innerBorderYellow a:hover img {
margin: -1px;
border: solid 1px yellow;
}
/**//* for IE6 *//**/
* html .innerBorderYellow a:hover {
zoom: 1;
}
* html .innerBorderYellow a:hover img {
/* for BackCompat mode
margin-left: -2px;
margin-right: -2px;
over here */
float: left;
position: relative;
}
/*-------------------------------------*/
/*
imgタグを含むタグにクラスとして指定することで、
ロールオーバー時にハイライト表示 ＜グレー＞
*/
/*-------------------------------------*/
.innerBorder a:hover img {
margin: -1px;
border: solid 1px #ccc;
}
/**//* for IE6 *//**/
* html .innerBorder a:hover {
zoom: 1;
}
* html .innerBorder a:hover img {
/* for BackCompat mode
margin-left: -6px;
margin-right: -6px;
over here */
float: left;
position: relative;
}
/* ===============================================
▼画像廻りライン
=============================================== */
img.line { border: solid 1px #cccccc; }
/*-------------------------------------*/
/* 1pxの仕切り線を表示 */
/*-------------------------------------*/
/*//1px border//*/
div.border{
width:100%;
height:1px;
background-color:#ccc;
overflow:hidden;
}
/*-------------------------------------*/
/*マウスオーバー
/*-------------------------------------*/
a img.over{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}
a:hover img.over{
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
.ibr20 {
border-radius: 20px;
padding:2px;
}
/*-------------------------------------*/
/*縦位置
/*-------------------------------------*/
.va_ba {vertical-align:baseline;}
.va_t {vertical-align:top;}
.va_m {vertical-align:middle;}
.va_bo {vertical-align:bottom;}
.va_tt {vertical-align:text-top;}
.va_tb {vertical-align:text-bottom;}
/*-------------------------------------*/
/*BOX横並び揃える(Flexbox)
/*-------------------------------------*/
.df{
display:flex;
align-items:center;
justify-content: center;
}
.df_box{
width: 49%;
margin: 1%;
flex-shrink: 0;
text-align:center;
align-self:flex-start;
}
.df_box2{
width: calc(100%/3);
margin: 1%;
flex-shrink: 0;
text-align:center;
align-self:flex-start;
}
.df_box_l{
width: 49%;
margin: 1%;
flex-shrink: 0;
align-self:flex-start;
}
@media screen and (max-width: 480px){
.df{
display: flex;
flex-direction: column;
margin: 2em 0;
}
.df_box{
width: 100%;
margin: 0 1%;
text-align:center;
}
.df_box_l{
width: 100%;
margin: 3%;
text-align:left;
}
}
/*-------------------------------------*/
/*横並びメニュー(Flexbox)
/*-------------------------------------*/
ul.df_menu{
list-style: none;
display:flex;
align-items: center;
justify-content: center;
}
@media screen and (max-width: 480px){
ul.df_menu{
width: 100%;
list-style: none;
display: flex;
flex-flow: column;
align-items: center;
}
ul.df_menu li{
width: 90%;
margin: 3%;
}
}
/*-------------------------------------*/
/*画像の上に文字
/*-------------------------------------*/
.image_txt {/*テキスト左上 親div*/
position: relative;/*相対配置*/
width: 80%;
margin: 0 auto;
}
.image_txt p{
position: absolute;
top: 0;/*画像の左上に配置*/
left: 0;
margin: 0; /*余計な隙間を除く*/
color: #000;/*文字を黒に*/
background: rgba(255,255,255,0.8);/*背景色*/
font-size: 0.85em;
line-height: 2;/*行高は1に*/
padding: 5px 10px !important;/*文字周りの余白*/
}
.image_txt img {
width: 100%;
}
.image_txt_b {/*テキスト右下 親div*/
position: relative;/*相対配置*/
width: 80%;
margin: 0 auto;
}
.image_txt_b p{
position: absolute;
bottom: 0;/*画像の左上に配置*/
right: 0;
margin: 0; /*余計な隙間を除く*/
color: #000;/*文字を黒に*/
background: rgba(255,255,255,0.8);/*背景色*/
font-size: 0.85em;
line-height: 2;/*行高は1に*/
padding: 5px 10px !important;/*文字周りの余白*/
}
.image_txt_b img {
width: 100%;
}
/*-------------------------------------*/
/*リスト
/*-------------------------------------*/
dl.list01 dt {
width:auto;
height:auto;
margin:10px 0;
padding:10px;
}
dl.list01 dd {
padding-left:15px;
margin:5px 10px;
}
dl.list01 dd:before {
content:"●";
color:#ed6d1f;
padding-right:5px;
}
dl.list02 {
height:100px;
margin-bottom:20px;
}
dl.list02 dt.dt03 {
width:280px;
height:36px;
text-indent:-9999px;
margin:15px 0;
}
dl.list02 dd {
width:100%;
float:left;
display:inline;
background:url(../capi_img/jiban_img/circle.gif) no-repeat left 3px;
padding-left:15px;
margin:5px 0;
}
.lsn{
list-style-type: none;
}
dl.yokonarabi {
border-bottom:1px solid #ccc;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
background-color:#ddeeff;
margin:10px;
}
dl.yokonarabi dt {
float:left;
clear: left;
width:calc(100% / 4 - 5px);
font-weight:bold;
background-color:#ddeeff;
border-top:1px solid #ccc;
padding:5px;
}
dl.yokonarabi dd {
background-color:#ffffff;
border-top:1px solid #ccc;
margin-left:calc(100% / 4 - 5px);
padding:5px;
}
@media screen and (max-width: 767px){
dl.yokonarabi {
width:95%;
height: auto ;
text-align: center ;
border-bottom:1px solid #ccc;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
margin:5px;
}
dl.yokonarabi dt {
width:100%;
height: 1.8em ;
font-weight:bold;
background-color:#ddeeff;
border-top:1px solid #ccc;
padding: 0px 1em ;
}
dl.yokonarabi dd {
width:100%;
margin-left: 0px ;
background-color:#ffffff;
border-top:1px solid #ccc;
padding: 0px 1em ;
font-size: 0.9em ;
text-align: left ;
}
}
ol.sankaku{
counter-reset:list;
list-style-type:none;
font: 14px/1.6 'arial narrow', sans-serif;
padding:0;
}
ol.sankaku li{
position:relative;
padding: 0 0 0 20px;
margin: 7px 0 7px 0px;
line-height: 1.5;
}
ol.sankaku li:before{
counter-increment: list;
content: "";
display: block;
position: absolute;
left: 5px;
height: 0;
width: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 7px solid #33a1db;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
/*-------------------------------------*/
/*フロート解除
/*-------------------------------------*/
.cb{
/* floatを解除 */
clear: both;
}
/*-------------------------------------*/
/*シンプルボーダーボタン
/*-------------------------------------*/
.square_btn {
display: inline-block;
margin: 1em;
padding: 0.3em 1em;
text-decoration: none;
color: #000;
border: solid 1px #67c5ff;
border-radius: 3px;
transition: .4s;
}
.square_btn:hover {
background: #67c5ff;
color: white;
}
.ellipse_btn {
display: inline-block;
padding: 8px 20px;
border-radius: 25px;
border: solid 1px #67c5ff;
text-align: center;
}
@media screen and (max-width: 640px) {
.ellipse_btn {
display: inline-block;
width: 85%;
padding: 8px 20px;
border-radius: 25px;
border: solid 1px #67c5ff;
text-align: center;
}
}
.btn_home{
width:100%;
}
.btn_home a{
display:block;
width:15%;
margin: 0;
padding: 2px 0;
text-decoration: none;
background:#FFFDFC;
text-align:center;
border:2px solid #0F11FF;
color:#000000;
font-size:1.5em;
font-weight:bold;
border-radius:50px;
-webkit-border-radius:50px;
-moz-border-radius:50px;
}
.btn_home a:hover{
background:#0099FF;
color:#FFFFFF;
margin-left:0px;
margin-top:0px;
border:2px solid #FFFFFF;
box-shadow:none;
}
/*印刷時設定*/
@media print{
.no_print{
display: none;/*印刷時非表示*/
margin: 0;
padding: 0;
}
}
/*-------------------------------------*/
/*▼スライド関連部分の装飾（PCのみ）
/*-------------------------------------*/
.PhotoBox {
position: relative;
}
.SlideBox {
position: absolute;
left: 0px;
top: 200px; /* 写真の高さに合わせる */
width: 205px; /* 写真の横幅に合わせる */
height: 200px; /* スライドして重ねる領域の高さ */
background-color: black; /* スライドして重ねる領域の背景色 */
color: white; /* スライドして重ねる領域の文字色 */
opacity: 0.6; /* スライドして重ねる領域の透明度 */
}
.SlideBox p.Caption {
font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
font-weight: bold; /* 文字の太さ */
font-size: 90%; /* 文字サイズ */
margin: 0.5em; /* 周囲の余白量 */
padding: 0.5em 1.2em;
text-align: center;
}
/*-------------------------------------*/
/*▼アンダーライン
/*-------------------------------------*/
/*---------マーカー風（黄色）-------------*/
.seotext {
background:linear-gradient(transparent 70%, #FFFF00 0%);
}
/*---------マーカー風（赤）-------------*/
.seotext_red {
background:linear-gradient(transparent 70%, #FF9966 0%);
}
/*---------hoberでテキストチェンジ-------------*/
@charset "utf-8";
/*表示するテキストが切り替わる*/
.btntextchange{
/*テキストの基点とするためrelativeを指定*/
position: relative;
/*ボタンの形状*/
min-width:210px;
padding: 20px;
text-align: center;
display: inline-block;
text-decoration: none;
outline: none;
/*アニメーションの指定*/
transition: all .2s;
}
/*hoverした際の変化*/
.btntextchange:hover{
background:#333;
color:#fff;
}
.btntextchange span{
/*絶対配置でテキストの位置を決める*/
position: absolute;
left: 50%;
top:50%;
transform:translate(-50%,-50%);
/*アニメーションの指定*/
transition: all .5s;
/*ブロック要素にしてテキスト折り返しなし*/
display: block;
white-space: nowrap;
}
/*差し替わるテキストの設定*/
.btntextchange span:nth-child(2){
opacity:0;/*透過0に*/
}
/*hoverするとテキストが入れ替わる設定*/
.btntextchange:hover span:nth-child(1){
opacity:0;/*透過0に*/
}
.btntextchange:hover span:nth-child(2){
opacity:1;/*不透明に*/
line-height:90%;
}