@charset "utf-8";
/* 20240615 */
body#personality{
	display: flex;
	flex-direction: column;
	align-items: center;
	}
/* --------------------------------------------- */
/* ------------------- main -------------------- */
/* --------------------------------------------- */
body#personality main article{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100vw;
	position: relative;
}
body#personality main article#photo{
	background-image: url("../../img/withmygrandma.jpg");
	background-repeat: no-repeat;
	background-position: -64vw top;
	background-size: cover;
	height: 100vw;
	background-color: #bbb;
	font-size: clamp(0.625rem, -0.303rem + 5.3vmin, 5rem);
}
body#personality main article#photo p#sign{
    font-family: "WindSong", cursive, 'Noto Sans JP', sans-serif,"Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック";
	color: #fff;
	font-size: 2em;
	line-height: 1em;
    transform: rotate(-10deg);
    display: inline-block;
    position: absolute;
    bottom:20vw;
    left: 5vw;
}


/*--------------------------------------------------
共通
--------------------------------------------------*/
body#personality main article .inner_width{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 72vw;
	max-width: 38em;
	margin: calc(4vw + 4em) auto;
	text-align: left;
	}

body#personality main article#prof_area{background-color: var(--color_l01);}
body#personality main article#circumstances{background-color: #000;}
body#personality main article#withmygrandma{background-color: var(--color_l01);}

body#personality main article .inner_width h1{margin-bottom: 1em; text-align: center;}
body#personality main article#withmygrandma .inner_width h1{margin-bottom: 2em;}

/*--------------------------------------------------
prof_area
--------------------------------------------------*/
body#personality main article#prof_area section#short_prof{margin-bottom: 0; line-height: 1.8em;}
body#personality main article#prof_area section#short_prof h1{margin-bottom: .2em;}
body#personality main article#prof_area section#short_prof h2{margin-bottom: 2em; font-size: 1em;}
body#personality main article#prof_area section#short_prof p.occupation{
	margin-bottom: 3em;
	font-size: .8em;
	line-height: 1.6em;
	text-align: center;
	}
	body#personality main article#prof_area section#short_prof p.occupation span{
		display: inline-block;
		}

body#personality main article#prof_area section#short_prof div{
	text-align: left;
	}
	@media (min-width:984px){
	body#personality main article#prof_area section#short_prof div{
		text-align: center;
		}
	}

body#personality main article#prof_area section#skill div#flex_2r3r{
	width: 72vw;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	text-align: center;
}
body#personality main article#prof_area section#skill div#flex_2r3r a.info {margin: 3vw;}
body#personality main article#prof_area section#skill div#flex_2r3r div.pie {
	width: 30vw;
	height: 30vw;
	max-width: 8em;
	max-height: 8em;
}

/*--------------------------------------------------
circumstances
--------------------------------------------------*/
body#personality main article#circumstances{
	background-image: linear-gradient(14deg, rgba(93, 93, 93, .8), rgba(213, 213, 213, .8)), url("../../img/withmygrandma_2.jpg");
	background-blend-mode:Screen;/*Multiply Darken Color-burn Overlay Color Saturation Screen Exclusion*/	
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 200%;
	color:black;
	text-shadow: 0 0 15px rgba(250,250,245,1),5px 0 15px rgba(250,250,245,1),0 5px 15px rgba(250,250,245,1),5px 5px 15px rgba(250,250,245,1);
}
body#personality main article#circumstances h1{
	text-shadow: 0 0 15px rgba(250,250,245,1),5px 0 15px rgba(250,250,245,1),0 5px 15px rgba(250,250,245,1),5px 5px 15px rgba(250,250,245,1),0 0 15px rgba(250,250,245,1),5px 0 15px rgba(250,250,245,1),0 5px 15px rgba(250,250,245,1),5px 5px 15px rgba(250,250,245,1);
}
body#personality main article#circumstances h1 + p{
	background-color: rgba(255,255,255,.6);
	margin-bottom: 60vw;
	line-height: 1.8em;
}

/*--------------------------------------------------
withmygrandma
--------------------------------------------------*/
body#personality main article#withmygrandma div.sns{
	margin-bottom: 2em;
	}
	body#personality main article#withmygrandma div.sns div.icon{
		background-color: var(--color_d01);
		border-radius: .5em;
		width: 6em;
		height: 6em;
		max-width: 150px;
		max-height: 150px;
		margin-right: calc(2vw + 1em);
		float: left;
		display: flex;
		justify-content: center;
		align-items: center;
		}
	body#personality main article#withmygrandma div.sns div.icon img{
		width: 50%;
		}

/*==================================================
モーダル表示のためのCSS
===================================*/
/*全て共通：hideエリアをはじめは非表示*/
.hide-area{display: none;}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
  background:#ccc;
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
  background:#666;
}

/*==================================================
pie chart
===================================*/
.pie {
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	color:#255E4F;
	line-height: 1.4em;
}
#wireframe{
	background-image: radial-gradient(#f2f2f2 60%, transparent 31%), conic-gradient(#52D5B2 0% 85%, #d9d9d9 85% 100%);	
	}
#coding{
	background-image: radial-gradient(#f2f2f2 60%, transparent 31%), conic-gradient(#52D5B2 0% 80%, #d9d9d9 80% 100%);	
	}
#writing{
	background-image: radial-gradient(#f2f2f2 60%, transparent 31%), conic-gradient(#52D5B2 0% 75%, #d9d9d9 75% 100%);	
	}
#photoshop{
	background-image: radial-gradient(#f2f2f2 60%, transparent 31%), conic-gradient(#52D5B2 0% 80%, #d9d9d9 80% 100%);	
	}
#illustrator{
	background-image: radial-gradient(#f2f2f2 60%, transparent 31%), conic-gradient(#52D5B2 0% 78%, #d9d9d9 78% 100%);	
	}
#premierepro{
	background-image: radial-gradient(#f2f2f2 60%, transparent 31%), conic-gradient(#52D5B2 0% 40%, #d9d9d9 40% 100%);	
	}

/*==================================================
波線区切りエリア https://www.shapedivider.app/
===================================*/
.bg_wavy_l01,.bg_wavy_l02 {
    position: absolute;
	bottom: calc(0px - 4vw - 4em);
    width: 100vw;
    overflow: hidden;
    line-height: 0;
	z-index: 1;
}
.bg_wavy_l01 svg,.bg_wavy_l02 svg {
    position: relative;
    display: block;
    width: calc(144% + 1.3px);
    height: calc(4vw + 4em);
}
.bg_wavy_l01 .shape-fill {fill: var(--color_l01);}
.bg_wavy_l02 .shape-fill {fill: var(--color_l02);}

body#personality main article#photo div.bg_wavy_l01,
body#personality main article#circumstances div.bg_wavy_l01{transform: rotate(180deg); bottom: -1px;}


/* --------------------------------------------- */
/* -------------------- 横長 -------------------- */
/* --------------------------------------------- */
/* 横長 */
@media (orientation: landscape){
body#personality main article#photo{
	background-position: center bottom;
	height: 90vh;
}
body#personality main article#photo p#sign{
	font-size: 3em;
    bottom:18vh;
    left: 14vw;
}
/*--------------------------------------------------
prof_area
--------------------------------------------------*/
body#personality main article#prof_area section#skill div#flex_2r3r{max-width:880px;}
body#personality main article#prof_area section#skill div#flex_2r3r div.pie {
	width: 18vw;
	height: 18vw;
	max-width: 9em;
	max-height: 9em;
}

/*--------------------------------------------------
circumstances
--------------------------------------------------*/
body#personality main article#circumstances{
	background-position: left bottom;
	background-size: 100%;
}
body#personality main article#circumstances h1 + p{
	padding: 1em;
	margin-bottom: 6vw;
}
body#personality main article#circumstances div.inner_width{
	width:50%;
	max-width: 600px;
	margin-left: 44%;
	margin-right: 6%;
}
body#personality main article#circumstances h1{
	text-shadow: none;
}
}