@charset "utf-8";

body {
	font-family: "Futura", Helvetica, sans-serif;
}
html{
	background-color:#c60082;
}
body,header{
	background-color:#fffafa;
}

header img{
	width:4rem;
	/*height:auto;*/
	margin-left:2rem;
}
a{
	text-decoration:none;
}
li{
	list-style-type:none;
}
h1{
	margin-top:1rem;
	margin-right:1rem;
}
.main_name{
	display:inline-flex;
}
.main_name p{
	font-size:2rem;
	color:#c60082;
	font-weight:bold;
}
.main_name a:hover{
	color:pink;
}

.freedial{
	position:relative;
	top:1rem;
	display:block;
	text-align:center;
	width:300px;
	height:100px;
	border:3px solid #c60082;
	border-radius:9px;
	line-height:30px;
	margin:0 auto;
	box-sizing:border-box;
	color: black;
		margin-bottom:3rem;
}
.freedial:before{
	content:"";
	position:absolute;
	top:50%;
	left:-24px;
	margin-top:-12px;
	border: 12px solid transparent;
	 border-right: 12px solid #FFF;
	z-index: 2;
}
.freedial:after{
	content: "";
	position: absolute;
	top: 50%;
	left: -30px;
	margin-top: -14px;
	border: 14px solid transparent;
	border-right: 14px solid #c60082;
	z-index: 1;
}

.freedial img{
		width:30px!important;
		height:auto!important;
}

.greetings,.map,.profile{
	margin:6%;
}
.wrapper{
	margin: 0 2%;
}
	
/* ---Other Styling--- */



h2 {
	font-size: 1.5rem;
	margin-bottom: 5%;
}
section{
	margin-right:6%;
	margin-left:6%;
  }
.line{
	width:100%;
	height:3px;
	background-color:#c71585;
}
	
/* ---footer--- */
footer{
	
	padding:2% 0;
	background-color:#c60082;
	text-align:center;
}
footer a{
	color:white;
}
.lisence{
	color:#f2b1d9;
}
/* ---pagetop btn--- */
	.pagetop {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 15px;
}
.pagetop a {
    display: block;
    background-color: #c71585;
		text-align: center;
    color: #fff;
    font-size: 18px;
    text-decoration: none;
 padding: 10px; /* ボタンの大きさを調整 */
    width: 50px; /* ボタンの横幅を指定 */
    height: 50px; /* ボタンの縦幅を指定 */
    line-height: 50px; /* テキストの縦位置を中央に */
    border-radius: 50%; /* 完全に丸くする */
    filter: alpha(opacity=50);
}
.pagetop a:hover {
    display: block;
    background-color: #c71585;;
		text-align: center;
    color: #fff;
    font-size: 18px;
    text-decoration: none;
padding: 10px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%; /* ホバー時も丸を維持 */
    filter: alpha(opacity=50);
	}
	
	.banner-list {
    display: flex; /* 横並びにする */
    justify-content: center; /* 中央揃え（必要に応じて変更） */
    gap: 20px; /* バナー間のスペース */
    list-style: none; /* リストの点（•）を消す */
    padding: 0; /* デフォルトのパディングをなくす */
}

.banner {
    flex: 1; /* 必要なら、均等に伸ばす */
    max-width: 200px; /* バナーの最大幅を調整 */
}
	.banner {
		margin-top:3rem;
    padding: 10px;
    border-radius: 8px;
}

.journal {
		background-color: green;
		padding-top:1rem;
}

.culture {
		border:1px solid #c60082;
		background-color: white;
		color:#c60082;
	}
	.culture a{
		color:#c60082;
	}
	
.banner img {
    width: 100%; /* 親要素に合わせる */
    height: auto; /* アスペクト比を保つ */
    transition: opacity 0.3s; /* ホバー時のエフェクト */
}

.banner:hover img {
    opacity: 0.3; /* ホバー時に少し薄くなる */
	}
	.banner:hover{
    opacity: 0.3; /* ホバー時に少し薄くなる */
}
@media screen and (max-width: 768px) { /* スマホのとき */
	/*横揺れをピタッと直すコード*/	

 html,
 body {
 overflow-x: hidden!important;
 overflow-y: scroll;
 -webkit-overflow-scrolling: touch;
 }

/*横揺れをピタッと直すコード　　おわり*/
  .main_name p{
	font-size:1.5rem; !important;
}
	.freedial{
			margin:0 auto;
			text-align:center;
		}
	}