@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: 68%;
}
#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:5em;
    background:url("../img/ill02.jpg") no-repeat 8% top;
    background-size:45% auto;
    margin-bottom:3.5em;
}

.textArea{
    width:100%;
    position:relative;
}

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{
    width: 70%;
    margin: 0 auto;
    display: block;
}

.profile{
    margin:1em auto;
    padding-top: 60px;
    transition:0.5s;
}
.sp {
	display:none; 
	}

/* =======================================
	TABLET
======================================= */
@media screen and  ( max-width:1399px) {
    .profile{
    margin:1em auto;
    padding-top: 60px;
}
}

/* =======================================
	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:3em;
        }
    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;
        }
    img#ill03{
    width: 80%;
    margin: 0 auto;
    display: block;
   
        }

    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;
}
}
@media screen and (min-width: 1400px) {
    /*Profile*/
#p06 #mainArea div.profile p{
	text-align: left;
}
}