@charset "utf-8";
/* CSS Document */
div#pagebody {
    max-width: 940px;
    margin:0 auto;
    padding:0;
    text-align:center;
    }
div.mainBlock {
    clear: both;
    margin: 0;
    padding: 0;
    overflow: hidden;
    }
div.mainBlock h2 {
    clear: both;
    margin:15px 0;
    padding: 0;
    overflow: hidden;
    color:#222;
    font-family: "ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
    font-size: 30px;
    }
div.mainBlock h3 {
    clear: both;
    margin: 0;
    padding: 30px 0 10px 0 ;
    overflow: hidden;
    color:#222;
    font-family: "ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
    font-size: 24px;
    }
div.mainBlock h4 {
    clear: both;
    margin: 0;
    padding: 10px 0 10px 0 ;
    overflow: hidden;
    color:#222;
    font-family: "ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
    font-size: 24px;
    }
div.mainBlock img{
    max-width: 100%;
    height: auto;
    width /***/:auto;　
    }


/* 影を付ける
----------------------------------------------- */
.shadow img {
    padding: 5px;
    box-shadow: 2px 2px 3px 3px #CCC;
}

div.shadowBox {
    max-width: 900px;
    margin: 0 0 0 3px;
    padding: 15px;
    text-align: left;
    box-shadow: 2px 2px 3px 3px #CCC;
}


/* 引用
----------------------------------------------- */
blockquote {
    margin: 20px 0 10px 0;
    border-left:5px solid #ddd;
    background: #eee url(http://www.aionline-japan.com/images/templates/default/img/landing/wahcom/quote_open.gif) no-repeat 20px 20px;
    padding: 30px 20px 10px 20px;
    text-align: left;
}

/* リスト表示
----------------------------------------------- */
.section01 ul{
    padding:0;
    margin: 0;
    width: 100%;
}
.section01 li {
    padding: 0;
    margin: 10px -5px;
    float: left;
    width: 50%;
    box-sizing:border-box;
    display: block;
    text-align: center;
}
.section01 li img {
    max-width: 100%;
    padding: 5px;
    box-shadow: 2px 2px 3px 3px #CCC;
}

/* 商品リスト
----------------------------------------------- */
/* ３商品 */
.itemlistfree3 { clear:both; width:100%; margin:0 0 30px 0; padding:0; background:#FFF;}
.itemlistfree3:after { content:"."; display:block; height:0; clear:both; visibility:hidden;}
.itemlistfree3 ul { clear:both; width:100%; margin:0; padding:0; text-align:center; list-style:none;}
.itemlistfree3 li { float:left; width:33.333%; margin:0; padding:0; display:block; vertical-align:top; font-size:15px; line-height:1.3; list-style-position:outside;}

/* 商品画像 */
img.itemlistfree { 
  width:100%;
  -moz-box-shadow: 2px 2px 2px 2px #CCC;
  -webkit-box-shadow: 2px 2px 2px 2px #CCC;
  box-shadow: 2px 2px 2px 2px #CCC;
  background-color: #FFF;
  padding: 10px;
  margin: 0 0 10px -10px;
} 


/* コンテンツ
----------------------------------------------- */
div.mainBlock .box {
    clear: both;
    margin: 0;
    padding: 20px 0;
    text-align: left;
    overflow: hidden;
    }
div.mainBlock .box p {
    clear: both;
    color: #333;
    }

/* コンテンツ（テキストが左）
----------------------------------------------- */
div.mainBlock .box .boxL {
    float: left;
    width: 58%;
    padding: 0;
    text-align: left;
    color: #333;
    }
div.mainBlock .box .boxR {
    float: right;
    width: 40%;
    margin: 0;
    padding: 0;
    text-align: left;
    color: #333;
    }
div.mainBlock .box .boxR img {
    max-width: 95%;
    padding: 5px;
    box-shadow: 2px 2px 3px 3px #CCC;
    }


/* テーブル（受賞履歴）
----------------------------------------------- */
.table_01 {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0px;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    }
.table_01 th {
    width:20%;
    padding:4px;
    text-align: left;
    vertical-align: top;
    color: #333;
    background-color: #eae5e3;
    border-left: 3px double #999;
    border-top: 1px solid #fff;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    }
.table_01 td {
    width:80%;
    text-align: left;
    padding:4px;
    color: #333;
    background-color: #fff;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    }


@media screen and (max-width: 768px) 
{
img{
    max-width: 100%;
    height: auto;
    width /***/:auto;　
    }
.section01 li {
    width: 50%;
    }
}


@media screen and (max-width: 480px) 
{
img{
    max-width: 100%;
    height: auto;
    width /***/:auto;　
    }
.section01 li {
    width: 50%;
    }

/* コンテンツ（テキストが左）
----------------------------------------------- */
div.mainBlock .box .boxL {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
    color: #333;
    }
div.mainBlock .box .boxR {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
    color: #333;
    }
div.mainBlock .box .boxR img {
    width: 95%;
    margin-top: 10px;
    padding: 2%;
    border: 1px solid #ccc;
    }


/* コンテンツ（対談タイプ）
----------------------------------------------- */
.arrow_answer,
.arrow_question {
    position: relative;
    background: #fff;
    border: 2px solid #c8c8c8;
    border-radius: 10px;
    width:80%;
    text-align: left;
    font-size: 16px;
    color: #333;
    padding:3%;
}
.arrow_question {
    float: right;
}
.arrow_answer:after,
.arrow_answer:before,
.arrow_question:after,
.arrow_question:before {
    top: 30%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.arrow_question:after,
.arrow_question:before {
    right: 100%;
}
.arrow_answer:after,
.arrow_answer:before{
     left: 100%;
}
.arrow_answer:after,
.arrow_question:after {
    border-color: rgba(255, 255, 255, 0);
    border-width: 8px;
    margin-top: -8px;
}
.arrow_answer:after{
    border-left-color: #fff;
}
.arrow_question:after{
    border-right-color: #fff;
    
}
.arrow_answer:before,
.arrow_question:before {
    border-color: rgba(200, 200, 200, 0);
    border-width: 11px;
    margin-top: -11px;
}
.arrow_answer:before{
    border-left-color: #c8c8c8;
}
.arrow_question:before {
    border-right-color: #c8c8c8;    
}
.question_image{
     float: left;
     width:10%;
}
.answer_image{
     float: right;
     width:10%;
}
.answer_image img,
.question_image img{
     border-radius: 50px;
     width: 100%
}
.question_Box{
     width: 100%;
     overflow: hidden;
     margin-bottom: 3%;
    font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Meiryo,"メイリオ",Helvetica,Sans-Serif;
}