@charset "utf-8";
/* CSS Document */

@media screen and (max-width: 600px) {
body {
font: 15px/1.6  "Noto Sans JP", Meiryo,"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", sans-serif!important;
}
}

:root {
--base_wrap_s: 1200px;
--base_wrap_sp: 1260px;
--base_wrap_m: 1400px;
}

img{
max-width: 100%;
height: auto;
width /***/:auto;
}
*{
font-feature-settings: "palt";
}


.marker{
background:linear-gradient(transparent 70%, #ff6 30%);
}


h1{
font-weight:600;
}
header {
background-image: linear-gradient(90deg, #0099a2, #006e74);
color:#fff;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding:15px 120px;
}
@media only screen and (max-width: 900px) {
header {
padding:15px ;
}
}
header div{
width: fit-content;
}

.main{
text-align: center;
background:url(imgs/main_bg.png) top center no-repeat;
padding:100px 10px 20px;
}

.main .txt_min{
font-family: "Noto Serif JP", serif;
font-size:34px;
margin-top:100px;
font-weight:600;
margin-bottom:50px;
}

@media only screen and (max-width: 500px) {
header {
display: block;
}
header div{
width:100%;
}
h1 {
margin-bottom: 10px;
text-align: center;
}
header div a{
margin: auto;
}
.main .txt_min{
font-size: 30px;
}
}

/*----------------------*/
/*		　ビルボード　　　	 		*/
/*----------------------*/


/*--billboard-*/
.billboard{
display: flex;
flex-direction: row;
align-items: stretch; /* 追加：左右の要素の高さを揃えてぴったり合わせる */
}
.billboard > div{
width: 50%;
display: flex; /* 追加：子要素の高さを連動させる */
}

@media only screen and (max-width: 900px) {
.billboard{
display: block;
}
.billboard > div{
width: 100%;
}
.billboard > div:nth-of-type(2) section{
padding: 20px;
}
}


/* 左側の画像ブロックの調整 */
.billboard > div:first-child img {
  width: 100%;
  height: 100%;        /* 縦幅を親要素に合わせる */
  object-fit: cover;   /* 縦横比を保ったまま領域を隙間なく埋める */
  display: block;      /* 画像の下にできる謎の数ピクセルの隙間を消す */
}

.billboard > div:nth-of-type(2){
display: flex;
justify-content: center;
align-items: center;
background-image:
url("imgs/logo.svg"),

/* 変更：1つ目の画像を横幅オート・縦幅100%に指定 */
linear-gradient(90deg,  #007c83 ,#006d74);
background-size: auto 180%, cover;
background-repeat: no-repeat, no-repeat;
/* 追加：画像を上下左右の中央に配置 */
background-position: center center, center center;
}
.billboard > div:nth-of-type(2) section{
margin: 5px;
text-align: center;
color: #fff;
}

.billboard > div:nth-of-type(2) section h3{
font-size: 55px;
line-height:1.2em;
}
.billboard > div:nth-of-type(2) section .mtxt{
font-weight:500;
letter-spacing: 1.3px;
margin-right: -1.3px;
margin-bottom:30px;
}
.billboard > div:nth-of-type(2) section p:nth-of-type(2) {
margin-bottom:50px;
font-size: 14px;
}
.billboard > div:nth-of-type(2) section .btn {
min-width: 90%;
margin: auto;
position: relative;
width: fit-content;
min-height: 60px;
padding: 10px 40px;
line-height: 1.3em;
box-sizing: border-box;
background-color: #000;
color: #fff!important;
text-decoration: none;
display: block;
}
.billboard > div:nth-of-type(2) section .btn::after {
 content: "";
 position: absolute;
 right: 20px;
 width: 10px;
 height: 10px;
 border-top: 2px solid #fff;
 border-right: 2px solid #fff;
 transform: rotate(45deg)
}
.billboard > div:nth-of-type(2) section .btn:hover {
 opacity: 0.7;
 transition: 0.3s
}




/*----------------------*/
/*		　横並びボタン2つ　　　	 		*/
/*----------------------*/



ul.btn_column2{
display: flex;
align-items: center;
max-width: var(--base_wrap_s); 
justify-content: space-between;
margin: 20px auto;
padding:20px;
}
ul.btn_column2 li{
width:40%;
text-align: center;
margin-bottom: 15px;
}
ul.btn_column2 li .btn_b {
width: 100%;
}

ul.btn_column2 li .btn_b:hover {
 opacity: 0.7;
 transition: 0.3s
}
	@media only screen and (max-width: 768px) {
ul.btn_column2{
display: block;
padding: 10px
}
ul.btn_column2 li{
width:98%;
}
}





/*----------------------*/
/*		　ニュース　　　	 		*/
/*----------------------*/



.news_area{
max-width: var(--base_wrap_s); 
margin: 50px auto 50px;
padding:60px 0 0;
border-top:1px #ccc solid;
display: flex;
flex-flow: row wrap;
 justify-content: space-between;
}
@media only screen and (max-width: 1200px) {
.news_area{
padding:60px 15px 0;
}
}

.newsttl{
display: block;
width: 8em;
}
.newsttl h2{
font-size:50px;
color:#008f97;
line-height: 1em;
}
.newsbox{
width: 70%;
}

@media only screen and (max-width: 700px) {
.news_area{
display: block;
}
 .newsbox{
width: 98%;
margin: 10px auto;
}
}
.newsbox ul{
margin-top: 20px;
}

.newsbox ul li{
padding: 15px 0;
border-bottom: 1px solid #ccc;
}
.newsbox ul li:first-child{
border-top: 1px solid #ccc;
}
.newsbox ul li a{
display: flex;
flex-flow: row wrap;
}
.newsbox ul li a span:nth-of-type(1) {
width: 8em;
}
.newsbox ul li a span:nth-of-type(2) {
width: calc( 100% - 9.5em );
}
@media only screen and (max-width: 500px) {
.newsbox ul li a{
display: block;
}
.newsbox ul li a span:nth-of-type(1) ,
.newsbox ul li a span:nth-of-type(2) {
display: block;
width: 100%;
}
}





.newsbox .btn{
margin-top: 40px;
padding: 12px 20px;
background-color: #47a7a0;

display: block;
position: relative;
width: 70%;
text-align: center;
}
.newsbox .btn::after {
 content: "";
 position: absolute;
 right: 20px;
 top:1em;
 width: 10px;
 height: 10px;
 border-top: 2px solid #fff;
 border-right: 2px solid #fff;
 transform: rotate(45deg)
}
.newsbox .btn:hover {
 opacity: 0.7;
 transition: 0.3s
}
.newsbox .btn a:link, .newsbox .btn a:visited, .newsbox .btn a:active{
color: #fff!important;
}
.newsbox .btn a{
display: block;
width:100%;
}
/*----------------------*/
/*		　アピール　　　	 		*/
/*----------------------*/

.appeal{
padding: 30px 0;
background-image: linear-gradient(180deg, #eeeeee, #ffffff);
}
.appeal > div:nth-of-type(1) {
max-width: var(--base_wrap_sp); 
margin: 30px auto;
padding: 0 20px;
}
.appeal > div:nth-of-type(1)  h3{
font-size: 43px;
color: #47a7a0;
}
.appeal > div:nth-of-type(1)  p{
font-size: 19px;
font-weight: 800;
margin-top: 20px;
}

@media only screen and (max-width: 768px) {
.appeal > div:nth-of-type(1)  h3{
font-size: 25px;
}
.appeal > div:nth-of-type(1)  h3 br{
display: none;
}
.appeal > div:nth-of-type(1)  p{
font-size: 17px;
}
}

.appeal_area{
padding: 20px;
}

.appeal_area p a{
max-width: 630px;
margin: 50px auto;
display: block;
padding: 15px 20px;
position: relative;
color: #fff;
background-image:url("imgs/logo.svg"), linear-gradient(90deg, #30adb4, #116a6f);
background-size: 90% auto, cover;
background-repeat: no-repeat, no-repeat;
background-position: right -180px top -70px, center center;
}
.appeal_area p a:hover{
background-image:url("imgs/logo.svg"), linear-gradient(90deg, #116a6f, #30adb4);
}

@media only screen and (max-width: 500px) {
.appeal_area p a{
background-size: 100% auto, cover;
background-position: right -140px top -15px, center center;
}
}
.appeal_area p a::after{
 content: "";
 position: absolute;
 right: 20px;
 top:41%;
 width: 10px;
 height: 10px;
 border-top: 2px solid #fff;
 border-right: 2px solid #fff;
 transform: rotate(45deg)
}

.appeal_area p a span:nth-of-type(1){
font-size: 42px;
line-height: 1.3em;
}



/*---------------------------*/
/*		　社会・地域貢献活動 　　　	 		*/
/*---------------------------*/

.community_c_area{
background: 
 url("imgs/wave02_bg.png") no-repeat top center,
 linear-gradient(to bottom, #ffffff 300px, #46c0ba 300px);
background-size: 100% auto;
margin-bottom: 0;
}
@media only screen and (max-width: 768px) {
.community_c_area{
background-size: 220% auto;
}
}

.communityttl{
margin-top: 190px;
margin-bottom: 60px;
}
.communityttl h4{
font-weight: 400;
font-size: 50px;
line-height: 1.3em;
}
.communityttl p{
font-weight: 600;
}


.base_wrap{
max-width: var(--base_wrap_sp); 
margin: 0px auto;
padding: 0 20px;
}


/* 親要素：左右の要素の高さを常に連動させる */
.community_c_box {
background-color: #fff;
  display: flex;
  flex-direction: row;
  align-items: stretch; /* 左右の高さを強制的に一致させる */
  width: 100%;
}

/* 左側の文章エリア */
.community_c_box > div:first-child {
  width: 65%;
  padding: 40px; /* 必要に応じて余白を調整してください */
  box-sizing: border-box;
  background-color: #fff; /* 背景を白に */
}

/* 右側の画像を入れる器（枠） */
.community_c_box > div:last-child {
  width: 35%;
  overflow: hidden; /* 念のため枠からはみ出るのを防ぐ */
}

/* 右側の画像：ここが「マスク」の役割になります */
.community_c_box > div:last-child img {
  width: 100%;
  height: 100%;        /* 親のdiv（左の文章に応じた高さ）に100%合わせる */
  object-fit: cover;   /* 縦横比を維持したまま、枠に合わせてパッツリ切り抜く */
  display: block;      /* 下部の謎の隙間を消す */
}

@media only screen and (max-width: 500px) {
.community_c_box {
  display: block;
}
.community_c_box > div:first-child ,
.community_c_box > div:last-child {
width: 100%;
}
}


.community_c_box ul{
margin-top: 1em;
}

.community_c_box ul li {
  position: relative;
  padding-left: 1.2em; 
  margin-bottom: 8px; 
  line-height: 1.6; 
}

/* 最後の項目の下マージンは不要なので消す */
.community_c_box ul li:last-child {
  margin-bottom: 0;
}

/* 紺色の丸を再現する設定 */
.community_c_box ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .85em;  
  transform: translateY(-50%); /* 上下中央揃えの補正 */
  
  width: 5px; 
  height: 5px; 
  background-color: #2f3269;
  border-radius: 50%;
}




.community_c_box h5 {
  display: inline-flex;
  align-items: center; 
  /* 全体のサイズと見た目 */
  height: 34px;          
  border: 2px solid #2f3269; 
  background-color: #2f3269; 
  box-sizing: border-box;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  padding: 0 1px 0 9px;
  margin: 0;           
  margin-bottom: 15px;
}
.community_c_box h5 span {
  display: flex;
  align-items: center; 
  justify-content: center; 
  height: 100%;
  width: 40px;           
  background-color: #ffffff; 
  color: #2f3269;        
  font-size: 16px;
  font-weight: bold;
  margin-left: 10px;
}

.community_c_box h6 {
color: #2f3269; 
font-size: 21px;
font-weight: 500;
margin: 12px 0;
}


.loop_area{
min-height: 660px;
background-image: url("imgs/wave02.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}

@media only screen and (max-width: 900px) {
.loop_area{
min-height: 400px;
}
}


@media only screen and (max-width: 500px) {
.loop_area{
min-height: 360px;
background-image: url("imgs/wave02.png");
}

}


/* ループ全体の親枠（画面からはみ出た部分を隠す） */
.loop_wrap {
margin-top: 40px;
  overflow: hidden;
  width: 100%;
  display: flex;
}

/* アニメーションを動かす中身の箱 */
.loop_inner {
  display: flex;
  flex-shrink: 0; /* 縮小されるのを防ぐ */
  
  /* アニメーションの設定（30秒かけて無限ループ） */
  animation: loop_animation 30s linear infinite;
}

/* 中の画像の設定 */
.loop_inner img {
  height: 200px;  /* 画像の高さを好みに合わせて指定してください */
  width: auto;    /* 縦横比を保ったまま横幅を自動調整 */
  display: block;
}

/* 無限ループのアニメーションの動きの定義 */
@keyframes loop_animation {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 半分（1セット分）進んだら、一瞬で0の位置に戻る（これで無限に繋がります） */
    transform: translateX(-50%);
  }
}







/*---------------------------*/
/*		グラフとかのエリア　　　	 		*/
/*---------------------------*/

.value_area{
max-width: var(--base_wrap_s);
margin: 0px auto;
padding: 0 20px;
}
@media only screen and (max-width: 500px) {
.value_area{
margin-top: 60px;
}
}


.value_area .communityttl{
margin-top: 0;
}
.value_area .flexbox{
  display: flex;
  flex-flow: row wrap;
  margin-bottom: 30px;
}
.value_area .flexbox > div{
background-color: #F2F1F1;
}
.value_area .flexbox.clom2 > div p{
padding: 20px;
}
.value_area .flexbox > div p img{
width: 100%;
display: block;
}

.value_area .flexbox > div h4{
padding: 15px;
background-color: #46c0ba;
color: #fff;
}
.value_area .flexbox.clom2 {
  gap: 40px;
}


.value_area .flexbox.clom2 > div:nth-child(odd){
  width: calc((100% - 40px) * 20 / 47);
}
.value_area .flexbox.clom2 > div:nth-child(even){
  width: calc((100% - 40px) * 27 / 47);
}

.value_area .flexbox.clom4 {
  gap: 10px;
}
.value_area .flexbox.clom4 > div{
width: calc((100% - 30px) / 4);
padding: 15px;
flex-direction: column;
  display: flex;

}

@media only screen and (max-width: 768px) {
.value_area .flexbox.clom4 > div{
width: calc((100% - 10px) / 2);
}
}

@media only screen and (max-width: 500px) {
.value_area .flexbox.clom2 > div:nth-child(odd),
.value_area .flexbox.clom2 > div:nth-child(even),
.value_area .flexbox.clom4 > div{
width: 100%;
}
}

.value_area .flexbox.clom4 > div .logo{
height: 100px;
font-size: 12px;
}


.value_area .ttl01{
font-size: 35px;
margin: 15px 0;
font-weight: 400;
}

.value_area .ttl02{
width:100%; 
margin-bottom: 10px;
padding: 15px;
background-color: #46c0ba;
color: #fff;
}
.value_area p.txt01{
font-weight: 600;
height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.value_area p.txt01 span{
color: #e9482d;
font-weight: 800;
font-size: 32px;
display: inline-block;
margin: 0 5px;
}
.value_area p.txt02{
font-size: 13px;
margin-top: auto;
}









/*---------------------------*/
/*		基本メニュー　　	 		*/
/*---------------------------*/

.about_ttl{
width: 100%;
margin-top: 80px;
margin-bottom: 40px;
min-height: 450px;
aspect-ratio: 3.2 / 1; /* 少し横長に微調整しました */
background-image: url("imgs/wave01.svg");
background-repeat: no-repeat;
background-position: bottom center;
background-size: cover ;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: stretch;
}

.about_ttl > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 中身を一番下に配置 */
}
.about_ttl > div p {
  margin: 0;
  display: flex; /* pタグ内のimgの下隙間対策 */
}
.about_ttl > div img {
  display: block;
}
.aboutttl{
margin-top: 190px;
margin-bottom: 60px;
color: #fff;
position: relative;
}
.aboutttl::after {
content: '';
width: 100%;
height: 20px;
display: inline-block;
background-color: #fff;
position: absolute;
bottom: -60px;
left: 0;
}
.aboutttl p ,
.aboutttl p img{
vertical-align: bottom;
margin: 0;
}
.aboutttl h4{
font-weight: 400;
font-size: 50px;
line-height: 1.3em;
}
.aboutttl p{
font-weight: 600;
max-height: 450px; 
}

@media only screen and (max-width: 950px) {
.about_ttl{
background: none;
background-color: #46c0ba;
 background-image: linear-gradient(180deg, #46c0ba 53%, #ffffff);
display: block;
padding: 20px;
min-height:140px;
height: 140px;
margin-top: 7em;
margin-bottom:0;
aspect-ratio: auto;
}
.aboutttl{
margin-top: 0;
margin-bottom:0;
}
.about_ttl > div{
display: block;
color: #fff;
}
.aboutttl::after,
.about_ttl div:nth-child(2) p{
display: none;
}
.aboutttl h4{
font-size: 32px;
}
}
@media only screen and (max-width: 768px) {
.aboutttl h4{
font-size: 28px;
margin-bottom:10px;
}
}



.about_area h4{
font-size: 35px;
margin: 90px 0 40px;
font-weight: 500;
}
@media only screen and (max-width: 950px) {
.about_area h4{
font-size: 25px;
}
}
.cpartner_area .flexbox,
.about_area .flexbox{
display: flex;
flex-flow:row wrap
}
.cpartner_area .flexbox > div,
.about_area .flexbox > div {
width: calc((100% - 45px) / 4);
border: solid 1px #46c0ba;
}
.cpartner_area .flexbox > div{
background-color: #fff;
border: none;
}





@media only screen and (max-width: 768px) {
.cpartner_area .flexbox > div,
.about_area .flexbox > div {
width: calc((100% - 15px) / 2);
}
}

@media only screen and (max-width: 500px) {
.cpartner_area .flexbox,
.about_area .flexbox{
display: block;
}
.cpartner_area .flexbox > div,
.about_area .flexbox > div {
width: 100%;
margin-bottom: 20px;}
}

.cpartner_area .flexbox >div p img,
.about_area .flexbox > div p img{
width: 100%;
}
.cpartner_area .flexbox >div p:nth-of-type(2),
.about_area .flexbox > div p:nth-of-type(2){
padding: 15px;
font-size: 14px;
}
.cpartner_area .flexbox >div h4,
.about_area .flexbox > div h5{
padding: 15px;
background-color: #46c0ba;
color: #fff;
text-align: center;
}
.cpartner_area .flexbox >div h4{
background-color: #e95506;
}



.cpartner_area .flexbox,
.about_area .flexbox {
  gap: 15px;
}




/*----------------------*/
/*		　table　　　	 		*/
/*----------------------*/

.tbl03{
width: 100%;
background: #fff;
margin:30px 0;
table-layout: fixed;
box-sizing: border-box;
}
.tbl03,
.tbl03 td,
.tbl03 th{
border-collapse: collapse;
border-spacing: 0;
border-bottom: solid #333 1px;
padding: 16px;
}

.tbl03 th{
background: #000;
color: #fff;
border-right: solid #ccc 1px;
text-align: center;
}
.tbl03 th:nth-child(1){
width: 30%;
}
.tbl03 tr:nth-child(even){
background: #eee;
}
.tbl04,
.tbl04 td,
.tbl04 th{
padding: 5px 16px;
}

.bg_white tr{
background: #fff!important;
}














/*----------------------*/
/*		　チケットパートナー　　	 		*/
/*----------------------*/

.cpartner_area{
background: url("imgs/cpartner_bg.png") no-repeat top center;
background-size: cover;
padding: 60px 20px;
}
.cpartner_area h3{
color: #fff;
font-size: 35px;
margin: 90px 0 40px;
font-weight: 500;
}






/*----------------------*/
/*		　最後に　　　	 		*/
/*----------------------*/


/* 全体の囲み */
.end_area {
  width: 100%;
  overflow: hidden;
}

/* 左右を並べるコンテナ */
.end_content_wrap {
  display: flex;
  width: 100%;
  min-height: 300px; 
}

/* 左側：テキストエリア */
.end_text_box {
flex: 1; /* 余った幅をすべて占有 */
padding: 60px  100px 10px  100px; /* 周囲の余白 */
box-sizing: border-box;
}

.end_text_box h3{
font-size: 40px;
padding-bottom: 12px;
border-bottom : #000 solid 1px;
margin-bottom: 40px;
}

/* 右側：画像エリア（最大900px、画面幅に応じて縮む） */
.end_image_box {
flex: 1; /* テキストエリアと等倍で伸縮 */
max-width: 500px; /* 最大幅を900pxに制限 */
position: relative;
}

/* 画像自体のマスク・トリミング設定 */
.end_image_box img {
width: 100%;
height: 100%;
object-fit: cover; /* 画像の比率を保ったままエリアを埋め尽くす（トリミング） */
object-position: center center; /* トリミングの中心位置（必要に応じて変更可） */
display: block;
}

/* スマホ対応：画面が狭くなったら縦並びにする場合（お好みで調整） */
@media (max-width: 768px) {
.end_content_wrap {
flex-direction: column;
}
.end_text_box {
padding: 20px 30px;
}
.end_image_box {
max-width: 100%;
height: 250px; /* 縦並び時の画像の高さ */
}
}

.end_area p{
line-height: 1.9em;
margin-bottom: 2em;
font-size: 18px;
}


@media (max-width: 500px) {
.end_area p{
font-size: 16px;
}

}


footer{
background: #000;
color: #fff;
padding: 2em;
text-align: center;
}










/*----------------------*/
/*		　汎用ボタン　　　	 		*/
/*----------------------*/

.btn_b {
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative;
width: fit-content;
 min-height: 60px;
 padding: 0 40px;
 box-sizing: border-box;
 background-color: #000;
 color: #fff!important;
 text-decoration: none;
}
.btn_b::after {
 content: "";
 position: absolute;
 right: 20px;
 top:41%;
 width: 10px;
 height: 10px;
 border-top: 2px solid #fff;
 border-right: 2px solid #fff;
 transform: rotate(45deg)
}
.btn_b:hover {
 opacity: 0.7;
 transition: 0.3s
}



/*----------------------*/
/*		　位置　　　	 		*/
/*----------------------*/

.p00 {padding: 0px}
.p5 {padding: 5px;}
.p10 {padding: 10px;}
.p5-10{ padding:5px 10px;}
.p20{ padding:20px;}

.pl05 {padding-left: 5px;}
.pl10 {padding-left: 10px;}
.pl20 {padding-left: 20px;}
.pl30 {padding-left: 30px;}

.pt05 {padding-top: 5px;}
.pt10 {padding-top: 10px;}
.pt20 {padding-top: 20px;}
.pt30 {padding-top: 30px;}

.pb05 {padding-bottom: 5px;}
.pb10 {padding-bottom: 10px;}
.pb20 {padding-bottom: 20px;}
.pb30 {padding-bottom: 30px;}

.mt00{ margin-top:0px;}
.mt05{ margin-top:5px;}
.mt10{ margin-top:10px;}
.mt20{ margin-top:20px;}
.mt30{ margin-top:30px;}
.mt50{ margin-top:50px;}
.mt60{ margin-top:60px;}

.mb05{ margin-bottom:5px;}
.mb10{ margin-bottom:10px;}
.mb20{ margin-bottom:20px;}
.mb30{ margin-bottom:30px;}
.mb40 {margin-bottom:40px;}
.mb50{ margin-bottom:50px;}
.mb60 {margin-bottom:60px;}
.mb80{ margin-bottom:80px;}
.mb100 {margin-bottom:100px;}

.mb05em{ margin-bottom:.5em;}
.mb1em{ margin-bottom:1em !important;}
.mlr_auto{ margin-left: auto; margin-right: auto;}

.ml05 {margin-left:5px;}
.ml10 {margin-left:10px;}
.ml15 {margin-left:15px;}
.ml20 {margin-left:20px;}
.ml30 {margin-left:30px;}
.ml35 {margin-left:35px;}
.ml40 {margin-left:40px;}

.mr05 {margin-right:5px;}
.mr10 {margin-right:10px;}
.mr15 {margin-right:15px;}
.mr20 {margin-right:20px;}
.mr30 {margin-right:30px;}
.mr40 {margin-right:40px;}

.ti_1,
.tind{
padding-left:1em;
text-indent:-1em;
}

.f70{ font-size:70%;}
.f80{ font-size:80%;}
.f90{ font-size:90%;}
.f120{ font-size:120%;}
.f160{ font-size:160%;}
.f180{ font-size:180%;}
.f200{ font-size:200%;}

.weight400{font-weight :400;}
.weight500{font-weight :500;}
.weight600{font-weight :600;}
.weight700{font-weight :700;}

.ta_c{ text-align:center;}
.ta_r{ text-align:right;}

.c_red{ color: #E70003;}
.c_white{ color: #fff;}
.c_kubotab{color: #00a8a9;}


#page-top02 {
position: fixed;
bottom: 63px;
right: 20px;
width: 60px;
height: 60px;
z-index: 40;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s; /* 0.3秒かけてふわっと動かす */
}
/* 追記：スクロールした時にJavaScriptでこのクラスを付与して表示させる */
#page-top02.UpMove {
    opacity: 1;
    visibility: visible;
}
/* 追記：中の画像が枠にぴったり収まるようにする */
#page-top02 img {
    width: 100%;
    height: auto;
    display: block;
}

@media screen and (max-width: 768px) {
    #page-top02 {
        bottom: 30px;
        right: 10px;
        /* スマホでは少しボタンを小さくすると綺麗です（お好みで調整してください） */
        width: 30px;
        height: 30px;
    }
}