/******************************
 *	ブラウザ毎の表示の差異を吸収する為のデフォルトスタイル
 ******************************/
body,div,dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,pre,form,fieldset,
input,textarea,p,th,td 
{
	font-style:normal;
    margin:0; 
    padding:0;
    font-size:100%;
} /* blockquoteを排除*/
table { 
    border-collapse:collapse;
    border-spacing:0;
} 
img.floor {  
    border:0;
    overflow:hidden; 
    display:block;
    padding:0px;
} 

img {  
    border:0;
} 
address,caption,cite,code,
dfn,th,var { 
    font-style:normal; 
    font-weight:normal;
}/*em strongを排除*/
caption,th { 
    text-align:left; 
} 
h1,h2,h3,h4,h5,h6 
{
    font-weight:normal; 
}
li 
{
	list-style-type:none;
}
iframe
{
    margin: 0;
    padding: 0;
    border: 0;
}

ol.ordered{
	margin: 1em 0 1em 0;
    padding-left: 40px;
}
ol.ordered li{
	list-style-type:decimal;
}

ul.unordered{
	margin: 1em 0 1em 0;
    padding-left: 40px;
}
ul.unordered li{
	list-style-type:disc;	
}

/******************************
 *	汎用
 ******************************/
div.clear
{
	width:0px;
	height:0px;
	clear:both;
	overflow:hidden;
}


/** siteColorInit()用 **/
a.selOn
{
	/*background-color:#777;
	color:#EEE;*/
}

/*WYSIWYG-TEMPLATE (2分／3分画像)*/

table.templateForTwoImages, table.templateForThreeImages, table.templateForOneImages
{
	table-layout:fixed;
	border-collapse:separate;
	border-spacing:20px 5px;
	width:99%;
}
    table.templateForOneImages td
	{
		width:99%;
	}
	table.templateForOneImages td img
	{
		margin:auto;
		vertical-align:middle;
		max-width: 100% !important;
		height:auto;
	}
	
	table.templateForTwoImages td
	{
		width:49%;
	}
	table.templateForTwoImages td img
	{
		margin:auto;
		vertical-align:middle;
		max-width: 100% !important;
		height:auto;
	}
	
	table.templateForThreeImages td
	{
		width:33%;
	}
	table.templateForThreeImages td img
	{
		margin:auto;
		vertical-align:middle;
		max-width: 100% !important;
		height:auto;
	}
	td.borderWith
	{
		border:1px solid #DFDFDF;
		padding:2px;
		overflow:hidden;
	}
	/*
	table.templateForTwoImages td.borderWith
	{
		height:350px;
		max-height:350px;
	}
	table.templateForThreeImages td.borderWith
	{
		height:200px;
		max-height:200px;
	}
    */
	
/*WYSIWYG-TEMPLATE (2分／3分画像) End*/

/* ----- wysiwyg文字装飾用 start ----- */

/* wysiwygフォントサイズ指定 */
.wys_fs_s {
    font-size: 0.8em;
}
.wys_fs_l {
    font-size: 1.5em;
}
.wys_fs_ll {
    font-size: 2.0em;
}

/* wysiwygフォントカラー指定 */
/* ※uiB.css, uiK.css にも同class定義があるので合わせる必要あり */
/* ※色コードを変更・追加する場合はwysiwyg_tool内の色コード指定部分も要変更 */
.wys_fc_red {
    color: #ff0000;
}
.wys_fc_blue {
    color: #0033ff;
}
.wys_fc_green {
    color: #009933;
}
/* --- wysiwyg文字装飾用 end --- */

/* フロートヘッダー用 */
.headScroll{
    position:relative;
    z-index:999;
}
.headFixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
}


/****
 くまモン自己紹介
****/
#kumamon-clear,
#kumamon-clear2{
    clear:both;
}

#kumamon-profile-img{
    float:left;
    width: 45%;
    /*height:400px;*/
    background-image:url(../images/selfIntroduction/cloud.png);
    background-repeat:no-repeat;
    background-position:left top;
    text-align: center;
}
#kumamon-profile-commnet{
    float:left;
    width: 45%;
    padding:20px;
    background-color:#daffda;
    position:relative;
}
#kumamon-profile-commnet::after{
    /*position:absolute;
    display:block;
    float:none;
    content:"";
    width: 100%;
    height:200px;
    top:-200px;
    left:0;
    right:0;
    text-align:center;
    margin:0 auto;
    background-image:url(../images/selfIntroduction/kumamon-name.png);
    background-repeat:no-repeat;
    background-position:left top;*/
}


#kumamon-profile-commnet > div > div:nth-child(1){
    float: right;
    width: 129px;
    max-width: 65vw;
    height: 127px;
    background-image: url(../images/selfIntroduction/fruitVegetables.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right center;
    margin-left:0.5em;
}
#kumamon-profile-info > div:nth-child(2){
    width:50%;
    height:200px;
    float:right;
    /*background-image:url(../images/selfIntroduction/kumamon-name.png);
    background-repeat:no-repeat;
    background-position:left top;*/

    position:relative;
    z-index:-1;
}
#kumamon-profile-info > div:nth-child(2)::before{
    content:"";
    position:absolute;
    width:100%;
    height:108px;
    top:-60px;

    right:0;
    background-image:url(../images/selfIntroduction/cloud2.png);
    background-repeat:no-repeat;
    background-position:center top;
    z-index:0;
    opacity:0.9;

}
#kumamon-profile-info > div:nth-child(2)::after{
    content: "";
    position: absolute;
    width: 73%;
    margin: 0 auto;
    height: 200px;
    top: 0;
    right: 0;
    left: 0;
    background-image: url(../images/selfIntroduction/balloon.png);
    background-repeat: no-repeat;
    background-position: center top;
    z-index: 0;
    opacity: 0.9;

}

#kumamon-profile-info:after{
    content:"　";
    clear:both;
}


/****
 くまモン自己紹介 ボード部分
****/
#kumamon-profile-naiyo {
    margin-top:200px;
    border-radius:20px;
    background-color:rgba(228, 156, 49, 1);
    padding: 20px;
    position:relative;
}
#kumamon-profile-naiyo::before {
	position: absolute;
    border-radius:10px;
	display: block;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    border-radius:20px;
	box-shadow: inset 0 0 50px rgba(228, 156, 49, 1),
		inset 0 0 30px rgba(0, 0, 8, 1);
    
}
#kumamon-profile-naiyo::after {
    position: absolute;
    height: 100px;
    content:"　";
    top:-65px;
    right:0;
    left:0;
    background-image:url(../images/selfIntroduction/clip.png);
    background-repeat:no-repeat;
    background-position:center top;
    z-index:9;
}
#kumamon-profile-naiyo ul{
    padding:3em;
    background-color:Window;
    border-radius:10px;
    padding-top: 2.5em;
}
#kumamon-profile-naiyo ul::before{
    position: absolute;
    height: 300px;
    content: "　";
    top: -165px;
    right: 0;
    left: 0;
    background-image: url(../images/selfIntroduction/kumamon-star.png);
    background-repeat: no-repeat;
    background-position: right top;
    z-index: 9;
    max-width: 99vw;
    background-size: contain;
}

#kumamon-profile-naiyo ul li{
    width: 100%;
    margin:10px;    
    font-size:1.4em;
    color:#ca7149;
    border-bottom:dotted;
    border-bottom-color:#ca7149;
    border-bottom-width: 1px;

    overflow: hidden;
 
    margin: 0 auto;
    padding: 10px 0 10px 0;
}
    #kumamon-profile-naiyo ul li:last-child {
        border: none;
    }
#kumamon-profile-naiyo ul li p{
    float:left;
}
#kumamon-profile-naiyo ul li p:nth-child(1){
    width: 210px;
    padding-left:1em;
}
#kumamon-profile-naiyo ul li p:nth-child(2){
    width: calc(100% - 245px);
}
@media screen and (max-width:1100px) {
    #kumamon-profile-img,
    #kumamon-profile-commnet,
    #kumamon-profile-info > div:nth-child(2){
        float:none;
        width: 100%;
        margin: 0 auto;
        background-size: 30%;

    }
    #kumamon-profile-img{
        width: calc(90vw - 250px);
    }
    #kumamon-profile-commnet{
        width:calc(100% - 129px);
    }
    #kumamon-profile-info > div:nth-child(2)::before{
        top: -110px;
        background-size: 30%;
    }
    #kumamon-profile-info > div:nth-child(2)::after{
        top: -193px;
        width:100%;
        background-position:right top;
        background-size: 30%;
    }
    #kumamon-profile-info > div:nth-child(2){
        height:auto;
        
    }
    #kumamon-profile-naiyo {
        margin-top: 360px;
    }
    #kumamon-profile-naiyo ul {
        padding-left:0.5em;
        padding-right:0.5em;

    }
    #kumamon-profile-naiyo ul::before {
        background-position: center top;
        top: -360px;
    }
    #kumamon-profile-naiyo ul li p{
        float:none;
        
    }
    #kumamon-profile-naiyo ul li p:nth-child(2){
        width: 90%;
        padding-left: 2em;
    }

}

@media screen and (max-width:767px) {
    #kumamon-profile-img{
        width:100%;
    }
    #kumamon-profile-commnet{
        width:calc(100% - 40px);
    }
    #kumamon-profile-naiyo ul li p:nth-child(1) {
        padding-left: 0;
    }

    #kumamon-profile-naiyo ul li p:nth-child(2) {
        
        padding-left: 1em;
    }
    #kumamon-profile-info > div:nth-child(2)::after{
        width:100%;
    }
}

@media screen and (max-width:600px) {
    #kumamon-profile-naiyo ul li p:nth-child(1) {
        padding-left: 0;
    }

    #kumamon-profile-naiyo ul li p:nth-child(2) {
        width: 90%;
        padding-left: 1em;
    }
    #kumamon-profile-info > div:nth-child(2)::after{
        top: -167px;
        background-position: right;
    }
}