@charset "utf-8";
/* CSS Document */

/* =======================================
	2023.04  No.197
    p06/ 私の小宇宙
======================================= */
/*---Text Head---*/
    /*FV*/
#p06 #mainArea h2{
    width:43%;
	margin: 0 auto;
	/*margin: 0 0 0 50%;*/
}
#p06 #mainArea h3{
    width:3%;
    position:absolute;
    left:8%;
    top:1em;
    z-index:10;
    transition:0.5s;
}
    /*Profile*/
#p06 #mainArea h4{
    font-family: 'Noto Serif JP', sans-serif;
    font-size:20px;
    font-weight:600;
    display:block;
    margin-bottom:1em;
}

/*---Text Para---*/
#p06 #mainArea p{
  font-size:16px;
  line-height:2.4em;
  font-weight: 400;
  margin-bottom:1.8em;
    font-family: 'Noto Serif JP', sans-serif;
}
#p06 #mainArea p span{
    display: inline-block;
    text-indent:0;
}
#p06 #mainArea .titleArea p{
    display:none;
}
    /*Profile*/
#p06 #mainArea div.profile p{
    font-size:15px;
    line-height:1.5em;
    padding-left:2em;
    border-left:solid 1px #000;
}
#p06 #mainArea .profile-after {
	text-align: left;
}
div.profile p span#prof_name{
    font-size:17px;
    font-weight:300;
    display:block;
    margin-bottom:1em;
}
div.profile p span.arw{
    color:#E1BDB6;
    transform:rotate(-90deg);
    margin-right:0.5em;
}
#p06 #mainArea div.profile .pro-box {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#p06 #mainArea div.profile .pro-text {
width: 100%;
}
#p06 #mainArea div.profile .pro-img {
width: 22%;
padding: 35px 0 0 0;
border-left: none;
}
#p06 #mainArea div.profile .pro-img img {
width: 100%;
height: auto;
border: 1px solid #eee;
}

/* =======================================
	PC
======================================= */

/*---Layout---*/
#mainArea{
    background:#FFF;
}

.contArea{
    width:88%;
    max-width:1200px;
    min-width:850px;
    margin:3em auto 0;
}

.titleArea{
    width: 100%;
    position: relative;
    padding-bottom: 7em;
    background: url(../img/ill02.jpg) no-repeat 10% top;
    background-size: 27% auto;
    margin-bottom: 3.5em;
}

.textArea{
    width:100%;
    position:relative;
	padding-bottom: 540px;
	background: url(../img/ill01.jpg) no-repeat center 600px;
    background-size: 78% auto;
}
.bg-none{
    background: none;
	background-size: auto;
	padding-bottom: 0;
}

img#ill01{
    position:absolute;
    left:0;
    top:-5%;
    width:30%;
}
img#ill02{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
}

div.column{
    width:54.8%;
    min-width:600px;
    margin-left:22.6%;
    margin-bottom:3.5em;
}

img#ill03{
	position: absolute;
    right: 0;
    top: 3%;
    width: 22%;
}

.profile{
    margin:1em auto;
	padding-top: 0;
    transition:0.5s;
}
.sp {
	display:none; 
	}
@media screen and (max-width: 640px) {
	img#ill01{
    position: static;
    left:0;
    top:0;
    width:100%;
}
img#ill03{
	position: static;
	right:0;
    top:0;
    width: 70%;
    margin: 0 auto;
    display: block;
}
#p06 #mainArea div.profile .pro-text {
width: 100%;
}
}
@media screen and (min-width: 640px) {
}

/* =======================================
	TABLET
======================================= */
@media screen and  ( max-width:1399px) {
    .profile{
    margin:1em auto;
}
.textArea{
    width:100%;
    position:relative;
	padding-bottom: 500px;
	background: url(../img/ill01.jpg) no-repeat center 600px;
    background-size: 78% auto;
}
}
@media screen and  ( min-width:1400px) {
.textArea{
    width:100%;
    position:relative;
	padding-bottom: 550px;
	background: url(../img/ill01.jpg) no-repeat center 600px;
    background-size: 78% auto;
}
}
.bg-none{
    background: none;
	background-size: auto;
	padding-bottom: 0;
}

/* =======================================
	SMPH
======================================= */
@media screen and (max-width: 640px) {
    /*---Text Head---*/ 
        /*FV*/
    #p06 #mainArea h2{
        width:98%;
        margin:2em auto 1.5em;
    }
    #p06 #mainArea h3{
        display:none;
    }
        /*Profile*/
    #p06 #mainArea h4{
        font-size:20px;
        font-weight:600;
        margin-left:-1em;
    }
    /*---Text Para---*/   
    #p06 #mainArea p{
      font-size:17px;
      line-height:2.25em;
      font-weight: 400;
      margin-bottom:1.8em;
    }
	.profile{
    margin:1em auto;
    padding-top: 0;
}
    div.profile p{
        font-size:14px;
        line-height:1.6em;
        padding-left:1.5em;
        margin-left:-1em;
        border-left:solid 1px #000;
		text-align: left;
    }
	div.profile p a {
	  word-break: break-all;
    }

    /*---Layout---*/
    .contArea{
        min-width:auto;
        margin:0 auto;
        padding:0;
        width:90%;
    }

    .titleArea{
        width:100%;
        background:none;
        margin-bottom:1.5em;
        padding:0;
    }
    .textArea{
        width:90%;
        background:none;
        margin:0 auto;
        padding-bottom:0;
        }
    div.column{
        width:100%;
        min-width:auto;
        margin:0 auto;
    }

    img#ill02{
    width: 80%;
    margin: 0 auto;
    display: block;
    position: relative;
    left: auto;
    top: auto;
    right: auto;
        }

    br.spdn{
            display:none;
        }
	.sp {
	display:block; 
	}
	#p06 #mainArea div.profile .pro-box {
display: block;
}
#p06 #mainArea div.profile .pro-text {
width: 100%;
}
#p06 #mainArea div.profile .pro-img {
width: 70%;
padding: 0;
margin: 0 auto;
border-left: none;
}
#p06 #mainArea div.profile .pro-img img {
width: 100%;
height: auto;
border: 1px solid #eee;
}
}