@charset "utf-8";




#langChenge {
	margin: 1% 1% 0%;
}




/*----------言語選択ボタン*/
 /*ラジオボタンを非表示にする*/
#langChenge input[type="radio"]{
  display    : none;
}
 
 /*各ラジオボタンのラベルをボタンに変更する*/
#langChenge label{
	display    : inline-block;
	padding    : 2px 20px;
}
 
 /* === 選択されていない言語は非表示にする ==== */
#langJa:not(:checked) ~ * *:lang(ja) {
	display    : none;
}
#langEn:not(:checked) ~ * *:lang(en) {
	display    : none;
}
 
 /* === 選択されている言語のラベル色を変更 ==== */
#langJa:checked ~ label[for="langJa"] {
	background : rgba(0, 255, 255);
}
#langEn:checked ~ label[for="langEn"] {
	background : rgba(0, 255, 255);
}

.langChangeBtn {
	top: 1%;
}
/*言語選択ボタン----------*/




/*----------落書き表示トグル*/
.toggle_input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    opacity: 0;
    cursor: pointer;
}

.toggle_label {
    width: 25px;
    height: 25px;
    background: #fff;
    border: 3px solid #4BD865;
    position: relative;
    display: inline-block;
    border-radius: 40px;
    transition: 0.4s;
    box-sizing: border-box;
}

.toggle_label:after {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    left: 2px;
    top: 2px;
    z-index: 2;
    background: #4BD865;
    transition: 0.4s;
}

.toggle_input:checked + .toggle_label {
	border: 3px solid #eee;
}

.toggle_input:checked + .toggle_label:after {
	left: 23px;
	background: #eee;
}

.toggle_input:checked + .graf:after {
	display    : none;
}

.toggle_button {
	position: relative;
	width: 50px;
	height: 25px;
	float: right;
}
/*落書き表示トグル----------*/




/*----------基本フォントスタイル*/
p{
	text-align: justify;
	font-size: 1rem;
	font-family: 'Times New Roman', 'MS Serif', 'Yu Mincho', 'Hiragino Mincho ProN', 'serif';
	margin-bottom: 1%;
}

h1{
	font-size: 2.2rem;
	margin-bottom: auto;
}

h2{
	font-size: 1.2rem;
	margin-bottom: auto;
}

h3{
	font-size: 1.6rem;
	margin-bottom: 2%;
}

h4{
	font-size: 1.2rem;
	margin-bottom: 2%;
}

h5{
	font-size: 1rem;
	margin-bottom: 2%;
}
/*基本フォントスタイル----------*/




.headline{
	padding-top: 5px;
	padding-bottom: 5px;
	border: double;
	border-width: 1px 0px 0px 0px;
}

.title{
	text-align: center;
	line-height: 1;
	margin-bottom: 5%;
}

.content-title{
	text-align: center;
}

.person-name{
	text-align: center;
	line-height: 0.5;
	margin-bottom: 5%;
}

.content-1 #photo-01{
	width: 85%;
	margin-top: 1rem;
	padding-left: 2rem;
}

.content-1 p{
	padding-left: 2rem;
}

.content-2 p{
	padding-left: 4rem;
}

.content-2 h5{
	padding-left: 2rem;
}

.description{
	margin-left: 15%;
	margin-right: 15%;
	border: solid;
	border-width: 1px 0px;
	padding: 1em 0em;
}


.footer-outer{
	border: solid;
	border-width: 1px 0px 0px 0px;
	height: 5rem;
	background-color: #DDDDDD;
	padding: 1rem;	
	text-align: center;
}

.footer-inner{
	width: 80%;
	margin: 0 auto;
	max-width: 500px;
	text-align: center;
	vertical-align: middle;
}



/*----------落書き画像配置*/
.headline #graf-01{
	position: absolute;
	top: 8%;
	left: 1%;
	width: 7%;
}

.person-name #graf-02{
	position: absolute;
	left: 60%;
	width: 6%;
}

.person-name #graf-03{
	position: absolute;
	left: 5%;
	width: 20%;
}

.contnet-1-top #graf-04{
	position: absolute;
	left: 32%;
	width: 15%;
}

.content-2-top #graf-05{
	position: absolute;
	left: 70%;
	width: 30%;
	transform: translateY(-100%);
}

.c1-2 #graf-06{
	position: absolute;
	left: 25%;
	width: 20%;
	transform: translateY(-80%);
}

.c1-3 #graf-07{
	position: absolute;
	left: 35%;
	width: 11%;
	transform: translateY(-80%);
}

.c1-5 #graf-08{
	position: absolute;
	left: 25%;
	width: 23%;
	transform: translateY(-100%);
}

.c2-4 #graf-09{
	position: absolute;
	left: 88%;
	width: 12%;
	transform: translateY(-20%);
}
/*落書き画像配置----------*/




/*----------2カラム表示*/
.content-1{
	width: 45%;
	margin-right: 10%;
}

.content-2{
	width: 60%;
/*	margin-left: 10%;*/
	
}

.main{
	display: flex;
	padding-left: 10%;
	padding-right: 10%;
}
/*2カラム表示----------*/




/*----------確認用ボーダー表示*/
/*
.content-1, .content-2, .headline{
	border: 2px solid #000000;
}
*/
/*確認用ボーダー表示----------*/




.c1-1,
.c1-2,
.c1-3,
.c1-4,
.c1-5,
.c1-6,
.c2-1,
.c2-2,
.c2-3,
.c2-4{
	padding: 0px 0px 10px 0px;
	border-radius: 5px;
}

.c1-1:hover,
.c1-2:hover,
.c1-3:hover,
.c1-4:hover,
.c1-5:hover,
.c1-6:hover,
.c2-1:hover,
.c2-2:hover,
.c2-3:hover,
.c2-4:hover{
	background-color: rgba(127, 255, 255, 0.1);
	border-radius: 0rem 0rem 1rem 4rem; 
}

.c1-1:hover .c1-1_title,
.c1-2:hover .c1-2_title,
.c1-3:hover .c1-3_title,
.c1-4:hover .c1-4_title,
.c1-5:hover .c1-5_title,
.c1-6:hover .c1-6_title,
.c2-1:hover .c2-1_title,
.c2-2:hover .c2-2_title,
.c2-3:hover .c2-3_title,
.c2-4:hover .c2-4_title{
	background-color: rgba(127, 255, 255, 0.5);
}



/*----------レスポンシブデザイン（タブレット）*/
@media (max-width: 800px){
	p{font-size: 1.5vw;}
	h1{font-size: 3.8vw;}
	h2{font-size: 2.1vw;}
	h3{font-size: 3vw;}
	h4{font-size: 2.1vw;}
	h5{font-size: 1.7vw;}
}
/*レスポンシブデザイン（タブレット）----------*/




/*----------レスポンシブデザイン（モバイル）*/
@media (max-width: 500px){
	/*----------2カラム表示無効化*/
    .content-1{
        width: 100%;
    }

    .content-2{
        width: 100%;
    }

    .main{
        display: block;
        padding-left: 10%;
        padding-right: 10%;
    }
	/*2カラム表示無効化----------*/
	
	p{font-size: 3vw;}
	h1{font-size: 4vw;}
	h2{font-size: 2.2vw; margin-bottom: inherit;}
	h3{font-size: 5vw;}
	h4{font-size: 3.4vw;}
	h5{font-size: 3vw;}
	
	.content-1 img{
		width: 50%;
	}
}
/*レスポンシブデザイン（モバイル）----------*/