@charset"UTF-8";


html*{
    box-sizing:border-box;
}

body{
    font-family:"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","メイリオ",Meityo,"MS Pゴシック","MS PGothic",sans-serif;
    max-width: 980px;
    margin:0 auto;
    font-size: 16px;
    background-image: url(imgs/koruku.jpg);
}




/*-------------------------　全体をくくる　--------------*/
#contenabox{
padding-left: 10px;
padding-right: 10px;
}



 @media only screen and (min-width: 320px) {

    #contenabox{
        padding-left: 10px;
        padding-right: 10px;
    }

}



/*----------------------　囲み（シャドー付き）　-------------------*/

.taitorumawari{
    border-radius: 10px;
    background-color: #ffffff;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0px 3px 10px 2px rgba(0,0,0,0.4);
}

    @media only screen and (min-width: 600px){
        
  .taitorumawari{
    border-radius: 10px;
    background-color: #ffffff;
    padding-top: 15px;
      padding-left: 100px;
      padding-right: 100px;
      padding-bottom: 15px;
    margin-bottom: 15px;
    box-shadow: 0px 3px 10px 2px rgba(0,0,0,0.4);
}      
        
    }   
    
    

/*--------------------　イメージをウィンドウ幅に合わせる　-----*/
p.topimg img{width:100%;}
.topimg img{width:100%;}
.gazouimg img{width:100%;}
.taitoru img{width: 100%;}
.kiji img{width:100%;}
.aruaruimg img{width:80%;}
.obachanimg img{width:80%;}
.newgazouimg img{width:100%;}
.tanpin img{width: 100%;}
.tooopimg img{width: 100%;}

@media screen and (min-width: 600px) {
.topimg img{width:100%;}
}

@media screen and (min-width: 600px) {
.gazouimg img{width:50%;}
}

@media screen and (min-width: 600px) {
.aruaruimg img{width:30%;}
}

@media screen and (min-width: 600px) {
    .newgazouimg img{width:70%;}
}

@media screen and (min-width: 600px) {
    .tanpin img{width:50%;}
}




/*-----------------　box_a　--------------------*/

@media screen and (min-width:600px){
    .box_a:after{
        content:"";
        display:block;
        clear: both;
    }
    
    .p_kiji{
        float:left;
        width:60%;
    }
    
    .topimg{
        float: right;
        width:40%;
    }
    
    
    .tooopimg{
        width:40%;
    }
    
    
}



/*-----------------　box_b　--------------------*/

@media screen and (min-width:600px){
    .box_b:after{
        content:"";
        display:block;
        clear: both;
    }
    
    .hidariyose{
        float:left;
        width:65%;
    }
    .migiyose{
        float: right;
        width: 35%;
    }
    
}

/*-----------------　box_c　--------------------*/

@media screen and (min-width:600px){
    .box_c:after{
        content:"";
        display:block;
        clear: both;
    }
    
    .hidariyose{
        float:left;
        width:45%;
    }
    .migiyose{
        float: right;
        width: 45%;
    }
    
}



.chibigazouimg img{
    width:70%;}



/*------　大腸の図を画像を二つ並べる　----------*/



@media screen and (min-width:600px){
    .daicho:after{
        content:"";
        display:block;
        clear: both;
    }
    
    .akudama{
        float:left;
        width:48%;
    }
    
    .zendama{
        float: right;
        width:48%;
    }
}
    
}











/*---------------　599pxで画像を差し替える　-------------------*/

/*---------------- 599px以上の時は"pc"が表示 ---------*/
.pc{display: block; }
.sp{display: none; }

/*---------------- 599px以下の時は"sp"が表示 ----------*/
@media only screen and (max-width: 599px) {
.pc{display: none!important;}
.sp{display: block;}
}


/*------------------　サイトのタイトル　--
.deka_title{
font-size: 2rem;
font-weight: 600;
}----*/


/*------------------　本文　-------------------*/
p{
    font-size: 1rem;
    line-height: 1.65;
}


/*------------------　特集の見出し（ドット囲みのあるタイトル）　---------*/
.dekamidashi{
    font-size: 1.4rem;
    font-weight: 600;
    color: #7c593f;
    border-radius: 10px;
    background-color: #faf3d7;
    border-style: dotted;
    border-color: #7c593f; 
    padding: 10px;
}


/*---------　セクションの見出し（ドット囲みのあるタイトル）　---------*/
.sb_midashi{
    font-size: 1.5rem;
    font-weight: 600;
    color: #7c593f;
    border-radius: 10px;
    background-color: #faf3d7;
    border-style: dotted;
    border-color: #c49979; 
    padding: 12px;
}



/*--------------　三角が下の吹き出し　--------------*/
.fukidashi {
 	position: relative;
	display: inline-block;
 	margin: 1.5em 0;
	padding: 7px 10px;
	min-width: 120px;
 	max-width: 100%;
 	color: #ffffff;
	font-size: 1.25rem;
    font-weight: 600;
	background: #c49979;
    border-radius: 15px;
}

.fukidashi:before{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
 	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 15px solid #c49979;
}

.fukidashi p {
	margin: 0;
	padding: 0;
}




/*------------------　見出し　---------*/
.midashi{
    background-color: #faf3d7;
    font-size: 1.5em;
    font-weight: 900;
    color: #7c593f;
    border-style: dotted;
    border-color: #7c593f; 
    padding: 12px;
}


/*------------------　小さい見出し（号数）　---------*/
.s_midashi{
    font-size: 1.2em;
    font-weight: 600;
    color: #7c593f;
}

/*--------------------　リード　-------------------------*/
.leedo{
    font-size: 1.25rem;
    line-height: 1.5;
    font-weight: 600;
    color: #7c593f;
}


/*----------　中ぐらいの見出し　---------*/
.m_midashi{
    font-size: 1.6em;
    font-weight: 600;
    color: #7c593f;
    border-top-style: solid;
    border-bottom-style: solid;
    padding-top: 12px;
    padding-bottom: 12px
}


/*------------　部分的に赤　--------*/
.aka{
color: crimson;
}

/*--------------　ちょっと大きくして赤　------*/
.bigaka{
font-size: 1.4em;
color: crimson;
}


/*---------------　キャプション　--------*/
span.cap{
font-size:0.75em;

}

/*---------------　キャプション　--------*/
.caption{
font-size:0.75rem;
line-height: 1.5;
}



/*---------------　強調　-----------*/
span.kyocho{    
font-size: 1.2em;
font-weight: 600;
color: #7c593f;
}



.kakomi{
    border-radius:10px;
    background-color: #faf3d7;
    border-width: thin;
    padding: 15px;
}


.chibi{font-size: 0.6em;}


/*-------　文字間を少しつめる　----------*/
.tsume{
    letter-spacing: -0.15em;
}



/*-------------　hr2種　-----------------------*/
hr.tensen{
    border: none;
    border-top: 2px dotted #c49979; 
}

hr.saigomark{
    border: none;
    border-top: 2px dotted #c49979; 
}



p.zunonakanomoji{
         padding-left: 30px;
    padding-right: 30px;
     }


/*----------あるあるレイアウト---

.aruaru:after{content:"";
    display: block;
    clear:both
    }

.hidari_aru{
    float: left;
    width:700px;
}

.migi_aru{
    float: none;
    width:auto;
    margin-left: 700px;
}


.hidari_ataru{
    float: left;
    width:400px;
}

.migi_ataru{
    float: none;
    width:auto;
    margin-left: 500px;
}

.honbun{
    font-size: 16px;
    line-height: 26px;
}

.hidari_aruyo{
    float: left;
    width:600px;
}

.migi_aruyo{
    float: none;
    width:auto;
    margin-left: 600px;
}

.migi_aruyone{
    float: none;
    width:auto;
    margin-left: 650px;
}
------*/



/*-------------------------　三角が右向きの吹き出し　------
.fukidashi-right {
 	position: relative;
	display: inline-block;
 	margin: 1.5em 15px 1.5em 0;
	padding: 7px 10px;
	min-width: 120px;
 	max-width: 100%;
 	color: #555;
	font-size: 1.25rem;
	background: #FFF;
 	border: solid 3px #555;
 	box-sizing: border-box;
}

.fukidashi-right:before{
	content: "";
	position: absolute;
	top: 50%;
	right: -24px;
 	margin-top: -12px;
	border: 12px solid transparent;
	border-left: 12px solid #FFF;
 	z-index: 2;
}

.fukidashi-right:after{
	content: "";
	position: absolute;
	top: 50%;
	right: -30px;
 	margin-top: -14px;
	border: 14px solid transparent;
	border-left: 14px solid #555;
 	z-index: 1;
}

.fukidashi-right p {
	margin: 0;
	padding: 0;
}

-------*/