@charset "UTF-8";

/* ---- colors ---- 
white:#ffffff
gray:#F4F4F4
middleGray:A1ADB5
darkBule:#77809E
skyblue:#C0D4D7
opactiy:0.5
---------------- */

/* ---- z-index ----
-2：.kv_bg:after
-1：nav li a::before , .kv_bg:before
 1：nav li a
10：header
---------------- */

/* common
---------------------------------------------------*/

@media screen and (max-width:750px) { 
	/*　--------------tablet~sp css--------------　*/
	.pc_only {	display: none;	}
	.sp_only {	display: block;	}

	/* header */
	h1 .logo_img {
    max-width: 25px;
	}
	nav {
		padding: 8px 10px;
	}
	.menu {
		position: relative;
	}
	.menu_trigger {
		cursor: pointer;
	}
	.menu_btn_open {
		display: inline-block;
		position: relative;
		content: '';
		border: 1.5px solid #77809E;
		width: 20px;
		height: 1.5px;
		right: 0;
		border-radius: 20px;
		top: -4px
	}
	.menu_btn_open:before {
		position: absolute;
		content: '';
		border: 1.5px solid #77809E;
		width: 18px;
		right: -1px;
		top: -8px;
		border-radius: 20px;
	}
	.menu_btn_open:after {
		position: absolute;
		content: '';
		border: 1.5px solid #77809E;
		width: 18px;
		right: -1px;
		top: 6px;
		border-radius: 20px;
	}
	.menu_btnWrap_close {
		text-align: right;
	}
	.menu_btn_close {
		display: inline-block;
		position: relative;
		width: 30px;
		height: 30px;
	}
	.menu_btn_close:before {
		position: absolute;
		content: '';
		border: 1.5px solid #77809E;
		width: 30px;
		right: -1px;
		top: 14px;
		border-radius: 20px;
		transform:rotate(45deg);
	}
	.menu_btn_close:after {
		position: absolute;
		content: '';
		border: 1.5px solid #77809E;
		width: 30px;
		right: -1px;
		top: 14px;
		border-radius: 20px;
		transform:rotate(135deg)
	}
	#navInput:checked ~ .menu_bar {
		transform: translateX(0);
	}
	.menu_bg {
		position: fixed;
		content: '';
		width: 100%;
		height: 100%;
		background-color: rgba(192, 212, 215, .5);
		z-index: 10;
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
	}
	.menu_bar {
		transform: translateX(350px);
		position: fixed;
		top: 0;
		right: 0;
		width: 85%;
		height: 100%;
		background-color: #fff;
		box-shadow: 0 0 5px rgba(0,0,0,.5);
		max-width: 300px;
		overflow: auto;
		transition: transform ease .3s;
		padding: 15px 20px;
		z-index: 30;
	}
	.menu_bar::-webkit-scrollbar {
		width: 15px;
		border: solid 2px #77809E;
	}
	.menu_bar::-webkit-scrollbar-track{
		background-color: #77809E;
	}
	.menu_bar::-webkit-scrollbar-thumb{
		background-color: #ffffff;
		border-radius: 10px;
		border: 3px solid #77809E;
		border-left: 3px solid #77809E;
	}
	nav ul {
		display: block;
		margin: 0;
	}
	nav li + li {
    margin-left: 0;
		margin-top: 25px;
	}
	nav li a {
		display: block;
	}
	.menu_ls {
		font-size: 25px;
		line-height: 1;
		padding: 10px 30px 10px 5px;
	}
	.formIco {
    height: 30px;
		width: 30px;
	}

	/*　--------------home--------------　*/
	/* KV */
	#kv {
		padding-top: 50px;
	}
	.kv_img_wrap {
		overflow: hidden;
	}
	.kv_img_wrap img {
		max-width: 160%;
    transform: translateX(-20%);
	}
	.kv_bg:before {
    top: 25px;
	}
	.kv_bg:after {
		padding: 5px 20px;
		top: 45%;
		font-size: 3rem;
	}
	.kv_txt_wrap {
    padding: 10px 40px 40px;
	}

	/* news */
	.news_bg {
		max-height: 200px;
	}
	.news_list {
		flex-flow: column;
		padding: 10px 4px;
	}
	.news_list_txt {
    margin: 0 1rem;
    width: 100%;
	}

	/* artwork */
	.artwork_list_wrap {
    flex-flow: column;
	}
	.artwork_list {
    width: 100%;
	}
	.artwork_img {
		height: 180px;
	}
	.artwork_list + .artwork_list {
    margin-top: 20px;
	}
	#links {
		max-width: 500px;
	}
	.links_list_wrap {
		justify-content: center;
		flex-direction: column;
		max-width: 300px;
		margin: 20px auto 0;
	}
	.links_list_a {
		text-align: left;
		padding: 8px 10px;
		max-width: 300px;
		width: 100%;
		margin: auto;
	}
	.links_list_a:before {
		width: 20px;
		height: 15px;
		background-image: url(../img/common/arrow_hover.png);
	}
	.links_list_label {
		padding-left: 60px;
		font-size: 20px;
		position: relative;
	}
	.links_list_label:before {
		width: 25px;
		height: 25px;
	}

	/* blog */
	.blog_list_wrap {
    flex-flow: column;
	}
	.blog_list {
    margin: auto;
	}
	.blog_list + .blog_list {
    margin: 40px auto 0;
	}

	/*　--------------info--------------　*/

	/* infoKv */
	#infoKv {
		padding-top: 100px;
	}
	.infoKv_bg {
		font-size: 40px;
		left: -10px;
		margin: 100px auto 0;
	}
	.infoKv_ttl {
		margin: auto;
	}
	@media screen and (max-width:410px) { 
		.infoKv_bg {
			font-size: 26px;
			line-height: 2em;
			left: 0;
		}
	}
	.infoKv_ico {
			max-width: 150px;
			margin-left: 70%;
	}

	/* profile */
	#profile {
		padding-top: 40px;
	}
	.who_content {
		display: block;
	}
	.who_intoro, .who_icon {
		width: 100%;
	}
	.who_icon {
		padding: 10px 0 30px;
	}
	.profile_content + .profile_content {
		padding-top: 60px;
	}
	.canDo_intoro {
		display: block;
	}
	.canDo_intoro_work, .canDo_intoro_hobby {
		width: 100%;
	}
	.canDo_intoro_hobby {
		margin-top: 30px;
	}
	.toDo_list_wrap {
		display: block;
	}
	.toDo_list {
		width: 100%;
	}
	.toDo_list + .toDo_list{
		padding-top: 40px;
	}
	.toDo_list_intoro {
		text-align: left;
	}
	/* faq */
	.faq_ttl {
		text-align: center;
	}
	.faq_list_wrap {
		display: block;
	}
	.faq_list {
		width: 100%;
		overflow-wrap: anywhere;
	}
	.faq_wrap::before {
		right: -20px;
	}


	/*　--------------artwork--------------　*/
	.aw_wrap {
		transform: translateY(-60px);
	}
	.illust_list_wrap {
		gap: 10px 2%;
	}
	.illust_list {
    width: 32%;
	}
	.comic_list_wrap {
    display: block;
	}
	.comic_list {
    width: 100%;
	}
	.comic_list + .comic_list {
    margin-top: 20px;
	}
	.comic_topic::after {
		top: -5px;
		left: -10px;
		height: 20px;
		font-size: 14px;
	}
	.comic_topic::before {
		top: 25px;
	}
	#ARTWORK section {
		padding-top: 60px;
	}
	.others_soon {
		margin-bottom: 40px;
	}

	/*　--------------modal--------------　*/
	.browse_box {
    padding-top: 0;
	}
	#ARTWORK section {
		padding-top: 40px;
	}
	.browse_box_charIco_list {
    max-width: 45px;
	}
	@media screen and (max-width:550px) { 
		.browse_box_charStnd {
			display: block;
		}
		#charStnd_img {
			width: 100%;
			max-width: 150px;
			margin: auto;
		}
	}
	.browse_box_charStnd_txt {
		width: 100%;
	}
	.browse_head_close {
		max-width: 35px;
	}
	.browse_caption {
    padding: 10px 15px 15px;
	}

	#logTtl {
		font-size: 18px;
	}
	#logCap {
		font-size: 12px;
		margin-top: 5px;
	}
}