/********** root **********/
:root {
    --primary: #f5183a;
    --light: #cbdef2;
    --dark: #000000;
    --danger: #fa0000;
}

/*--------------------------------------
  カード型_02
--------------------------------------*/
.l-wrapper_02 {
  margin: 1rem auto;
  width: 100%;
}
.card-radius_02{
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,.2);
}

.card_02 {
  background-color: #fff;
  box-shadow: 0 0 0px rgba(0, 0, 0, .16);
  color: #212121;
  text-decoration: none;
}

.card__header_02 {
  display: flex;
  flex-wrap: wrap;
}

.card__title_02 {
  padding: ;
  font-size: 1.0rem;
  order: 1;
  font-weight: bold;
  text-decoration: none;
  /*線の種類（実線） 太さ 色*/
  border-bottom: solid 2px black;

}

.card__thumbnail_02 {
  margin: 0;
  order: 0;
}

.card__image_02 {
  width: 100%;
}

.card__body_02 {
  padding: 0.2rem;
}

.card__text_02 {
  font-size: .8rem;
  text-align:center;
  text-decoration: none;
}

.card__text2_02 {
  font-size: .8rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

/********** navi **********/

.basic-4 {
  background: 
      linear-gradient(currentColor 0 0) 
      var(--p, 0) 100% /var(--d, 0) 3px 
      no-repeat;
  transition: 0.3s, background-position 0s 0.3s;
}
.basic-4:hover {
  --d: 100%;
  --p: 100%;
}

/********** CSS **********/

html {
 overflow-x: hidden;
 overflow-y: scroll; -webkit-overflow-scrolling: touch
 }

.bg-jdark {background-color:#000;}

.bg-jgy {background-color:#141414;}

h1 {font-size: 3vh;}

h2 {font-size: 5vh;}

.wh01 {color: #fff;}

.red01 {color: #fa0000;}

.red02 {color: #ff0000;}

.bk01  {background-color:#111;}

.w-80 {	width: 80%;}

.w-10 {	width: 10%;}

.jsmall {font-size: 0.7rem;}

.jsmall2 {font-size: 0.6rem;}

#mbox2 {
	float: left;
	clear: both;
	padding: 1px;
	margin: 2px;
	font-family:Arial, Helvetica, sans-serif;
	background-color:#FFE375;
	position: relative;
	top: 5px;
	left: 18px;
	width: 935px;
	height: 1100px;
}

.sc {
	margin:2px 0px 2px 60px;
	padding: 5px;
	float: left;
	color:#666;
	font-weight: normal;
	z-index:100;
	width: 700px;
	font-family: Arial, Helvetica, sans-serif;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 20px;
    bottom: 20px;
    z-index: 99;
}


.araisp {
    width: 50%;
}

.araisp2 {
    width: 100%;
}


/* パソコンで見た時はclass名pc-onlyだけ表示 */
.pc-only{
    display: block;
}
.sp-only{
    display: none;
}

/*** Button ***/
.back-to-top {
    position: fixed;
    display: none;
    right: 20px;
    bottom: 20px;
    z-index: 99;
    opacity: 0.5;
}

.btn {
    font-weight: 500;
    transition: 0.9s;
}

.btn2 {
    font-weight: 500;
    transition: 0.9s;
}

.btn.btn-primary,
.btn.btn-outline-primary:hover {
    color: #FFFFFF;
}

.btn-square {
    width: 28px;
    height: 28px;
}

.btn-sm-square {
    width: 28px;
    height: 28px;
}

.btn-lg-square {
    width: 32px;
    height: 32px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}

/*** Navbar ***/
.navbar.sticky-top {
    top: -100px;
    transition: .5s;
}

.navbar{
    border-bottom: solid 2px #40403e;
    box-shadow: 0 3px 3px rgba(255, 255, 255, 0.28);/*影*/
}

.navbar .navbar-brand,
.navbar a.btn {
    height: 50px;
}

.navbar .navbar-nav .nav-link {
    margin-right: 30px;
    padding: 16px 0;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    outline: none;
}

/* ナビメニューhoverカラーターコイズブルー */
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: #f03113;
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}

.navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

/* ハンバーガーメニュのBGカラー濃いグレー */
.navbar-toggler{
  border-color: #fff;
  background-color: #5c5a59;
}

@media (max-width: 991.98px) {
    .navbar .navbar-nav .nav-link  {
        margin-right: 0;
        padding: 10px 0;
    }

    .navbar .navbar-nav {
        border-top: 1px solid #EEEEEE;
    }
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        border: none;
        margin-top: 0;
        top: 150%;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
    }

    .navbar .nav-item:hover .dropdown-menu {
        top: 100%;
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }
}


/*** Bio ***/
.cp_timeline04 {
	position: relative;
	margin: 3em auto;
	padding-bottom: 2em;
}
.cp_timeline04:before {
	position: absolute;
	top: 0px;
	left: 45px;
	width: 3px;
	height: 100%;
	content: '';
	background: #e91e63;
}
.cp_timeline04 .timeline_item {
	margin: 0px 0px 0px 80px;
}
.cp_timeline04 .timeline_item .time_date .time {
	font-family: serif;
	font-size: 3.2em;
	font-weight: bold;
	position: relative;
	margin: 0;
	letter-spacing: 3px;
	color: rgba(233,30,99,0.7);
}
.cp_timeline04 .timeline_item .time_date .time:before {
	position: absolute;
	top: 50%;
	left: -39px;
	width: 10px;
	height: 10px;
	content: '';
	-webkit-transform: rotate(45deg);
	        transform: rotate(45deg);
	border: 3px solid #e91e63;
	background: #fff;
}
.cp_timeline04 .timeline_item .time_date .flag {
	font-size: 1.0em;
	font-weight: bold;
	margin: 0;
	margin-top: -24px;
	color: #e3e1e2;
}
.cp_timeline04 .timeline_item .desc {
	font-size: 0.8em;
	line-height: 20px;
	margin-top: 10px;
	padding-left: 20px;
	color: #dbd5d8;
	border-left: 1px solid #880e4f;
}
@media only screen and (max-width: 767px) {
	.cp_timeline04:before {
		left: 15px;
	}
	.cp_timeline04 .timeline_item .time_date .time:before {
		left: -29px;
	}
	.cp_timeline04 .timeline_item {
		margin: 0px 0px 0px 40px;
	}
	.cp_timeline04 .timeline_item .desc {
		padding-left: 0px;
		border-top: 1px solid #880e4f;
		border-left: none;
	}
}

/*** 背景画像固定 ***/
.jjbgimg { 
  background-image:url("https://arai-takeshi.jpmusic.net/img/arai06.jpg"); 
  background-attachment: fixed; 
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-size: cover;
  background-position: center;
}

/*** Discography ***/

.h4001{
font-size: 1.8em;
color: #fff;
}
ul.cdtext {
list-style: none;

}

hr.hrst01 {
	border-top: 2px dashed #8c8b8b;
}

ul.cdtext li {
color: #fff;
font-size: 0.7em;
margin-left: -20px;
}
.accordion {
margin: 3em auto;
max-width: 90vw;
}
.toggle {
display: none;
}
.option {
position: relative;
margin-bottom: 1em;
}
.title,
.content {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
transition: all 0.3s;
}
.title {
border: solid 1px #ccc;
font-size: 0.8rem;
padding: 1em;
display: block;
color: #fff;
font-weight: bold;
}
.title::after,
.title::before {
content: "";
position: absolute;
right: 1.25em;
top: 1.25em;
width: 2px;
height: 0.75em;
background-color: #999;
transition: all 0.3s;
}
.title::after {
transform: rotate(90deg);
}
.content {
max-height: 0;
overflow: hidden;
}
.content p {
margin: 0;
padding: 0.5em 1em 1em;
font-size: 0.9em;
line-height: 1.5;
}

.content p ul li{
color: #444;
}
.toggle:checked + .title + .content {
max-height: 500px;
transition: all 1.5s;
}
.toggle:checked + .title::before {
transform: rotate(90deg) !important;
}


/*画像上文字*/
.box{
  position: relative;
}

.jjtitle{
	font-size: 10vh;
	color: red;
}

.center {
  position: absolute;
  top: 73%;
  left: 35%;
  transform: translate(-50%, -50%);
}

.style01 {
	display: inline-block;		/* インライン要素：横並び配置、ブロック要素：幅や高さ・余白の指定可 */
	position: relative;
	color: rgba(0,0,0,0);		/* 透明 */
	top:0;
	left: 0;
}
.style01 span:nth-of-type(1){
	position: absolute;
	color: #999;				/* グレー */
	top: 0;
	left: 0;
	-webkit-text-stroke-width: 10px;
	z-index: 10;
}
.style01 span:nth-of-type(2){
	position: absolute;
	color: #333;				/* 黒 */
	top: 0;
	left: 0;
	-webkit-text-stroke-width: 8px;
	z-index: 20;
}
.style01 span:nth-of-type(3){
	position: absolute;
	color: #FFF;				/* 白 */
	top: 0;
	left: 0;
	-webkit-text-stroke-width: 6px;
	z-index: 30;
}
.style01 span:nth-of-type(4){
	position: absolute;
	color: #F00;				/* 赤 */
	top: 0;
	left: 0;
	-webkit-text-stroke-width: 1px;
	z-index: 40;
}
.style01 span:nth-of-type(5){
	position: absolute;
	color: #F00;				/* 赤 */
	margin: 0;
	-webkit-background-clip: text;
	-webkit-text-stroke: 0px ;
	top: 0;
	left: 0;
	z-index: 50;
}
.fontStyle01{
	font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
	font-size: 6vh;
	color: rgba(0,0,0,0);		/* 透明 */
}

/*CLINIC LIST*/

.clinic ul, ol {
  background: #1f1a1a;/*背景色*/
  padding: 0.5em 0.5em 0.5em 1.5em;/*ボックス内の余白*/
  border: solid 3px gray;/*線の種類 太さ 色*/
}

.clinic ul li, ol li {
  line-height: 1.5; /*文の行高*/
  padding: 0.5em 0; /*前後の文との余白*/
  color: #fff;
  font-size: 0.8rem;
}


/*Equipment LIST*/

.equip ul, ol {

  background: #1f1a1a;/*背景色*/
  padding: 0.5em 0.5em 0.5em 0.5em;/*ボックス内の余白*/
  border: solid 3px gray;/*線の種類 太さ 色*/
}

.equip ul li, ol li {
  list-style: none;
  line-height: 1.5; /*文の行高*/
  padding: 0.5em 0; /*前後の文との余白*/
  color: #fff;
  font-size: 0.8rem;

}

/*IMG HOVER 縮小*/

.Smaller{
transform: scale(0.9);
}
.Smaller:hover{
transform: scale(0.7);
transition-duration: 0.3s;
}

/*IMG HOVER キャプション*/
.effect02 {

	overflow:		hidden;
	margin:			10px 8px 10px 16px;
	position:		relative;
}
.effect02 .caption {
	width:			100%;
	height:			100%;
	visibility:		hidden;	/* 文字を表示しない */
	font-size:		130%;
	color:			#fff;
	top:			0;
	left:			0;
	position:		absolute;
	text-align:		center;
	-webkit-transition:	all 0.4s step-end;
	transition:		all 0.4s step-end;
}
.effect02:hover .caption {
	visibility:		visible;	/* 文字を表示する */
}
.effect02 .caption p {
	font-size:		130%;
	padding-top:		38vh;
	color:			#fff;
	opacity:		0;	/* ホバーが解除された時すぐ消えるように、文字を表無 */
}
.effect02:hover .caption p {
	opacity:		1;	/* 文字を表示する */
}
.effect02 .mask1, .effect02 .mask2 {
	width:			100%;
	height:			50%;	/* 高さは半部のサイズ */
	position:		absolute;
	left:			0;
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.4s ease;
	transition:		all 0.4s ease;
}
.effect02 .mask1 {
	top:			-50%;	/* 枠の上に置いて表示させない */
}
.effect02:hover .mask1 {
	top:			0;	/* 下にずらして表示する */
}
.effect02 .mask2 {
	bottom:			-50%;	/* 枠の下に置いて表示させない */
}
.effect02:hover .mask2 {
	bottom:			0;	/* 上にずらして表示する */
}




/*MAIL ボタン*/

a.btn--orange {
  color: #fff;
  background-color: #eb6100;
  border-bottom: 5px solid #b84c00;
}
a.btn--orange:hover {
  margin-top: 3px;
  color: #fff;
  background: #f56500;
  border-bottom: 2px solid #b84c00;
}
a.btn--shadow {
  -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
  box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
}

.dropdown-item:hover,.dropdown-item:focus{color:#fff;background-color:#000}


/*LIST*/
ul {
  padding: 0;
}

ul li, ol li {
  font-size: 0.8rem;
  color: #404040;
  border-left: solid 3px #7d7675;/*左側の線*/
  border-bottom: solid 1px #dadada;/*下に灰色線*/
  background: whitesmoke;
  margin-bottom: 2px;/*下のバーとの余白*/
  line-height: 1;
  padding: 0.1em;
  list-style-type: none!important;/*ポチ消す*/
  font-weight: ;
}