@charset "utf-8";
/*=================================
その他ページの共通レイアウト
===================================*/

@keyframes fadein {
  0% {opacity: 0}
  100% {opacity: 1}
}
/*==================================================
パンくず
===================================*/
.breadcrumb-002 {
	width: 90%;
    display: flex;
	justify-content: flex-end;
    gap: 0 15px;
    list-style: none;
    padding: 0;
    font-size: .8em;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5px;

}

.breadcrumb-002 li {
    display: flex;
    align-items: center;
}

.breadcrumb-002 li:not(:last-child)::after {
    display: inline-block;
    margin-left: 15px;
    color: #000333;
    content: '/';
}

.breadcrumb-002 a {
    color: #000333;
    text-decoration: none;
}
/*========= span設定のCSS ===============*/
.mini{
font-size: 14px;
letter-spacing: 0.2em
}
.midori{
color: teal;
}
.midori13{
color: teal;
font-size: 13px
}
.ao{
color: #265CFF;
}
.ao14{
color: #265CFF;
font-size: 14px
}
.kuro{
color: #000;
}
.aka{color:#FF2626}
.line{
background:linear-gradient(transparent 60%, #ff6 60%);}

.f-size14{
font-size: 14px;
}
.futoi{
font-weight: bold;
}
a.arealink {
color: #265CFF;
	font-size: 15px
}
a:hover.arealink {
color: #FFFF00;
}
/*========= ヘッダーロゴ設定のCSS ===============*/
.top {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
    z-index: 0;
	position: relative;
}
.top img{
	position:absolute;
	height: auto
}
/*==================================================
メインタイトル
===================================*/
/*メイン大*/
.midashi1 {
text-align: center;
margin-bottom: 0px
}
.midashi1 h3 {
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
  font-size: 28px;
  color: #265CFF;
	font-family: "Klee One", cursive;
	font-weight: 500;
	font-style: normal;
letter-spacing: 0.15em;
}
.midashi1 h3:before {
  content: '';
  position: absolute;
  bottom: -8px;
  display: inline-block;
  width: 40px;
  height: 1px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #265CFF;
  border-radius: 1px;
}
.midashi1 p {
font-size: 15px;
font-family: "Klee One", cursive;
font-weight: 500;
font-style: normal;
letter-spacing: 0.07em;
color: #265CFF;
}

/*==============
メニュー丸ボタン
==============*/
.menu-c{
margin-left: auto;
margin-right: auto;
}
.menu-c ul{
display: flex;
flex-wrap: wrap;	
justify-content: space-around;
}
.menu-c li{
list-style: none;
margin: 0 auto;text-align: center;

}
.menu-c li a{
position: relative;
display: inline-block;
border-radius: 50%;
background-color: rgba(38, 92, 255, 0.6);
text-align:center;
transition:all 0.3s;
border: 0px solid #000;
margin: 0 auto;

}
.menu-c li a span {
  position: absolute;
  display: inline-block;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align:center;
  color: #fff;
  font-family: "Klee One", cursive;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0em;
  transition:all 0.3s;
}
.menu-c a:hover {
background-color: rgba(255, 255, 77, 0.8);
color: #fff;cursor: pointer;}
.menu-c  a span:hover {
color: #fff;
}

/*==============
トップテキスト
==============*/
.top-text{
width: 100%;
height: 120px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: center;
align-items: center;
}
.top-text p{
text-align: center;
vertical-align: baseline;
color: #000;
font-family: "Klee One", cursive;
font-weight: 600;
font-style: normal;
padding: 0 3% 0 3%;
}

/*ヘナ紹介文*/
.nenna-box-text{
margin-bottom: 0px;
}
.nenna-box-text p{
color: #265CFF;
font-family: "Klee One", cursive;
text-align:justify;
font-weight: 600;
font-style: normal;
}
/*==============
エリア範囲指定
==============*/
/*内容*/
.area{
height: auto;
margin-left: auto;
margin-right: auto;
font-family: "Klee One", cursive;
color: #000
}

.area a{
text-decoration: none;
transition:all 0.3s;
}
.area a:hover {
}
.area li{
list-style: none;
}
/*メイン見出し*/
h5{
font-family: "Klee One", cursive;
font-weight: 600;
font-style: normal;
color: #265CFF;
position: relative;
display: inline-block;
line-height: 1.2em
}
h5:after {
  content: '';
  position: absolute;
  display: inline-block;
  background-color: #265CFF;
}
h5:after {
  right: 0;
}

/*太見出し*/
h6{
font-size: 16px;	
font-weight: 600;
line-height: 1.3em;
margin-bottom: 15px;
letter-spacing: 0.05em;
color: #265CFF;
}
/*プロフィール名前*/
h6.big{
font-size: 19px;	
font-weight: 600;
line-height: 1.0em;
letter-spacing: 0.25em;
margin-bottom: 30px;
color: #265CFF;
}
/*プロフィールふりがな*/
.small{
display: block;
font-size: 13px;
letter-spacing: 0.2em;
color: #265CFF;
margin-top:5px

}

/*太見出し*/
h7{
font-size: 15px;	
font-weight: 600;
line-height: 1.3em;
padding-bottom: 3px;
margin-top: 15px;
margin-bottom: 15px;
letter-spacing: 0.05em;
color: #265CFF;
display: block;
border-bottom: solid 1px #265CFF
}


/* ########### 427px 以下 ########### */
@media screen and (max-width: 427px) {
/*========= ヘッダーロゴ設定のCSS ==========*/
.top {
	padding-top: 20px;
	margin-bottom:40px;
}
.top img{
	top: -10px;
    right:0;
    left:5px;
	bottom: 0;
	width: 90px;
}

/*==========================
メニュー丸ボタン
===========================*/
.menu-c{
padding-left: 3%;
padding-right: 3%;
margin-bottom: 20px
}
.menu-c li{
width: 33%;
}
.menu-c li a{
width: 90px;
height: 90px;
}
.menu-c li a span {
width :90px;
font-size: 14px;
	line-height: 1.2em
}
/*==============
トップテキスト
==============*/
.top-text{
height: 90px;
margin-bottom: 20px;
}	
.top-text p{
font-size: 15px;
letter-spacing: 0em;
line-height: 1.7em;
padding: 0 7% 10px 7%
}
	
/*アクセスメイン見出し*/
h5{
font-size: 21px;
letter-spacing: 0em;
padding: 0 35px 0 0px;
margin-bottom: 30px;
line-height: 1em
}
h5:after {
  top: 30%;
  width: 30px;
  height: 1px;
}
}

/* ########### 427px 以下 ########### */
@media screen and (max-width: 427px) {
/*内容*/
.area{
width: 100%;
margin-bottom: 50px;
padding: 30px;

}

}
/* ########### 529px 以下 ########### */
@media screen and (max-width: 529px) {
	
/*ヘナ紹介文*/
.nenna-box-text p{
font-size: 15px;
line-height: 1.4em;
letter-spacing: 0em;
padding: 20px
}	}
/* ########### 428pxから530pxまで ########### */
@media screen and (min-width: 428px) and (max-width: 530px) {
/*========= ヘッダーロゴ設定のCSS ==========*/
.top {
	padding-top: 25px;
	margin-bottom:50px;
}
.top img{
	top: -15px;
    right:0;
    left:20px;
	bottom: 0;
	width: 100px;
}
/*==============
トップテキスト
==============*/
.top-text{
height: 95px;
margin-bottom: 20px;
}
.top-text p{
font-size: 16px;
letter-spacing: 0em;
line-height: 1.5em;
padding: 0 0% 10px 0%
}
/*==========================
メニュー丸ボタン
===========================*/
.menu-c{
	padding-left: 5%;
	padding-right: 5%;
margin-bottom: 20px
}
.menu-c li{
width: 33%;
}
.menu-c li a{
width: 95px;
height: 95px;
}
.menu-c li a span {
width :95px;
font-size: 15px;
}
	
/*メイン見出し*/
h5{
font-size: 24px;
letter-spacing: 0em;
padding: 0 50px 0 0px;
margin-bottom: 30px;
line-height: 0.9em
}
h5:after {
  top: 30%;
  width: 40px;
  height: 1px;
}
}
/* ########### 428pxから768pxまで ########### */
@media screen and (min-width: 428px) and (max-width: 768px) {
/*内容*/
.area{
width: 100%;
margin-bottom: 50px;
padding: 40px;

}
}
/* ########### 531px 以上 ########### */
@media screen and (min-width: 531px) {

/*==============
トップテキスト
==============*/
.top-text{
height: 95px;
margin-bottom: 20px;
}
.top-text p{
font-size: 16px;
letter-spacing: 0.2em;
line-height: 1.5em
}
/*メイン見出し*/
h5{
font-size: 28px;
letter-spacing: 0.1em;
padding: 0 70px 0 0px;
margin-bottom: 40px;
padding-right: 20px;
line-height: 0.8em
}
h5:after {
  top: 30%;
right:-20%;
  width: 40px;
  height: 1px;
}
}
/* ########### 769px 以上 ########### */
@media screen and (min-width: 769px) {
/*ヘナ紹介文*/
.nenna-box-text p{
font-size: 17px;
line-height: 1.8em;
letter-spacing: 0.1em;
padding: 40px;
text-align: center
}
/*内容*/
.area{
width: 100%;
margin-bottom: 30px;
padding: 50px;
}

}
/* ########### 531pxから768pxまで ########### */
@media screen and (min-width: 531px) and (max-width: 768px) {

/*========= ヘッダーロゴ設定のCSS ==========*/
.top {
	padding-top: 25px;
	margin-bottom:50px;
}
.top img{
	top: -15px;
    right:0;
    left:20px;
	bottom: 0;
	width: 100px;
}
/*==========================
メニュー丸ボタン
===========================*/
.menu-c{
	padding-left: 5%;
	padding-right: 5%;
margin-bottom: 20px
}
.menu-c li.me1 , .me2 , .me3 , .me4{
width: 25%;
}
.menu-c li.me5 , .me6{
width: 50%;
}
.menu-c li a{
width: 95px;
height: 95px;
}
.menu-c li a span {
width :95px;
font-size: 15px;
}

/*==============
トップテキスト
==============*/
.top-text{
height: 95px;
margin-bottom: 20px;
}
	
	
/*ヘナ紹介文*/
.nenna-box-text p{
font-size: 15px;
line-height: 1.7em;
letter-spacing: 0em;
padding: 35px;
text-align: center
}
}

/* ########### 769pxから960pxまで ########### */
@media screen and (min-width: 769px) and (max-width: 960px) {
/*========= ヘッダーロゴ設定のCSS ==========*/
.top {
	padding-top: 35px;
	margin-bottom:50px;
}
.top img{
	top: -20px;
    right:0;
    left:50px;
	bottom: 0;
	width: 110px;
}
/*==========================
メニュー丸ボタン
===========================*/
.menu-c{
margin-bottom: 30px
}
.menu-c li a{
width: 95px;
height: 95px;
}
.menu-c li a span {
width :95px;
font-size: 15px;
}
/*==============
トップテキスト
==============*/
.top-text{
height: 95px;
margin-bottom: 30px;
}
}
/* ########### 961px 以上 ########### */
@media screen and (min-width: 961px) {
/*========= ヘッダーロゴ設定のCSS ==========*/
.top {
	padding-top: 55px;
	margin-bottom:60px;
}
.top img{
	top: -30px;
    right:0;
    left:50px;
	bottom: 0;
	width: 120px;
}
/*==========================
メニュー丸ボタン
===========================*/
.menu-c{
margin-bottom: 50px
}
.menu-c li a{
width: 120px;
height: 120px;
}
.menu-c li a span {
width :120px;
font-size: 16px;
}
/*==============
トップテキスト
==============*/
.top-text{
height: 120px;
margin-bottom: 50px;
}
}