@charset "UTF-8";
/* =====================
  base
===================== */

html>body{font-size:14px;}
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block;}
body{font-size:75%;font-family:"ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif,Lucida Grande,Hiragino Kaku Gothic Pro,MS PGothic,Arial,Verdana;line-height:1.6;position:relative;}
ol, ul{list-style:none;}
blockquote, q{quotes:none;}
blockquote:before, blockquote:after,q:before, q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
img{vertical-align:bottom;}
.clearfix:after{content:"";display:block;clear:both;}
.italic{font-style:italic;}

@media print, screen and (min-width:768px){
    body{border:10px solid #bfc0c0;box-sizing:border-box;}
    .inner{max-width:980px;margin:0 auto;position:relative;}
    .sp{display:none;}
}
@media print, screen and (max-width:767px){
    body{border-top:10px solid #bfc0c0;border-bottom:10px solid #bfc0c0;}
    .inner{margin:0 10px;}
    .pc{display:none;}
    section img{width:100%;}
}
@media print, screen and (max-width:800px){
    br.pc{display:none;}
}
/* =====================
  header
===================== */
header h1 img{vertical-align:top;}
header .btn{position:absolute;top:0;right:0;}
header .btn a{background:#225283;color:#fff;font-size:15px;font-weight:bold;padding:10px 0;text-decoration:none;display:inline-block;text-align:center;}

@media print, screen and (min-width:768px){
    header h1 img:last-child{margin:30px 20px;}
	header nav ul{position:absolute;top:20px;right:215px;display:flex;font-size:13px;}
	header nav ul .active{border-bottom:2px solid #225283;}
	header nav ul li{padding:0 12px;}
	header nav ul a{text-decoration:none;color:#000;}
	header .btn a{width:200px;}
}
@media print, screen and (max-width:767px){
    header .inner{margin:0;}
    header h1{line-height:47px;}
    header h1 img:first-child{width:47px;}
    header h1 img:last-child{width:150px;line-height:47px;vertical-align:middle;margin-left:10px;}
    header .btn{top:10px;}
    header .btn a{padding:5px;font-size:11px;width:120px;}
	header nav ul{display:flex;font-size:12px;justify-content:flex-start;-webkit-justify-content:flex-start;margin-bottom:10px;}
	header nav ul{border-top:1px solid #b3b3b3;border-bottom:1px solid #b3b3b3;}
	header nav ul .active{background:#225283;color:#fff;}
	header nav ul li{flex-grow:1;-webkit-flex-grow:1;text-align:center;height:30px;line-height:30px;}
	header nav ul li:nth-child(2){border-left:1px solid #b3b3b3;border-right:1px solid #b3b3b3;}
	header nav ul a{text-decoration:none;color:#b3b3b3;display:block;}
}


/* =====================
  mainarea
===================== */

#mainarea h1{position: relative;}
#mainarea h1 .floatlink{position: absolute;display: block;text-decoration: none;}
#mainarea h2{color:#225383;font-weight:bold;margin:10px 0 15px;}
#mainarea dl{font-size:12px;padding-top:20px;max-width:555px;}
#mainarea dt{width:40px;float:left;}
#mainarea dd{margin-left:40px;}

@media print, screen and (min-width:768px){
    main{background:url(http://www.itochu-artsquare.jp/permanent/img/bg_top.png) no-repeat 10% top;overflow:hidden;}
    #mainarea{position:relative;padding-bottom:40px;}
    #mainarea h1{margin:-40px auto 0;width:60.7%;}
    #mainarea h1 img{width:100%;max-width:595px;}
    #mainarea h1 .floatlink{bottom: 7%;left: 16.65%;width: 24.4%;height: 7.5%;}
    #mainarea h2{font-size:21px;}
    #mainarea .lead{width:60.2%;max-width:590px;margin:0 auto;}
    #mainarea .lead>p{line-height:1.8;max-width:555px;}
    #mainarea .item1{position:absolute;bottom:60px;left:-15%;width:33%;}
    #mainarea .item1 img{width:100%;max-width:323px;}
    #mainarea .item2{position:absolute;top:15px;right:-7%;width:28%;z-index:-1;}
    #mainarea .item2 img{width:100%;max-width:274px;}
}
@media print, screen and (max-width:767px){
    #mainarea{position:relative;padding-bottom:110px;background:url(http://www.itochu-artsquare.jp/permanent/img/bg_top.png) no-repeat left bottom;background-size:52%;}
    #mainarea h1{margin:auto 0;}
    #mainarea h1 img{width:100%;}
    #mainarea h1 .floatlink{bottom: 1.4%;left: 18.8%;width: 25.2%;height: 8.2%;}
    #mainarea h2{font-size:15px;text-align:center;}
    #mainarea .item1{position:absolute;bottom:10px;right:10px;width:38%;}
    #mainarea .item1 img{width:100%;}
}

/* =====================
  section
===================== */

#section01,#section03{background:#e6e6e6;padding:45px 0;}
#section01 .textarea p small{font-size:10px;}
[data-ruby] {
    position: relative;
}
[data-ruby]::before {
    content: attr(data-ruby);
    position: absolute;
    top: -1em;
    left: 0;
    right: 0;
    margin: auto;
	font-size: 10px;
	text-align: center;
}

@media print, screen and (min-width:768px){
    #section01,#section03{background:#e6e6e6;padding:45px 0;}

    #section01 .inner{display:flex;}
    #section01 h2{margin-left:-30px;}
    #section01 .textarea{max-width:416px;margin:0 20px;}
    #section01 .textarea p{margin-bottom:18px;}
    #section01 .textarea p:first-child{margin-bottom:40px;}
    #section01 .textarea .post{font-size:12px;float:right;}
    #section01 .textarea strong{font-size:18px;font-weight:bold;}

    #section02{background:url(http://www.itochu-artsquare.jp/permanent/img/bg_02.png) no-repeat right bottom;position:relative;overflow:hidden;}
    #section02 .inner{display:flex;position:static;}
    #section02 .l-block,#section02 .r-block{width:50%;display:inline-block;}
    #section02 .l-block img{position:absolute;right:50%;top:0;}
    #section02 .r-block{padding:20px 0 50px 45px;box-sizing:border-box;}
    #section02 .r-block h2,#section02 .r-block .images{width:100%;}
    #section02 .r-block h2 img{width:100%;max-width:443px;}
    #section02 .r-block .images img{width:100%;max-width:434px;}
    #section02 .r-block .textarea{margin:18px 0 30px;}

    #section03 .inner{display:flex;justify-content:space-between;}
    #section03 .inner>div{width:50%;}
    #section03 .l-block h2,#section03 .r-block h2{margin-left:-40px;margin-bottom:28px;}
    #section03 .r-block h2{margin-top:-10px;}
    #section03 .l-block .textarea{max-width:420px;margin-bottom:25px;}
    #section03 .l-block .images{margin-left:-40px;width:95.2%;}
    #section03 .l-block .images img{width:100%;max-width:505px;}
    #section03 .r-block .textarea{margin-bottom:15px;}
    #section03 .r-block .images{width:66.6%;}
    #section03 .r-block .images img{width:100%;max-width:317px;}
}
@media print, screen and (max-width:767px){
    #section01,#section03{padding:10px 0 20px;}
    #section01 h2{width:75%}
    #section01 .textarea p{margin-bottom:18px;}
    #section01 .textarea p:first-child{margin-bottom:20px;}
    #section01 .textarea span{font-size:12px;text-align:right;width:100%;display:block;}
    #section01 .textarea strong{font-weight:bold;}
    #section01 .images{width:70%;margin:0 auto;}

    #section02{background:url(http://www.itochu-artsquare.jp/permanent/img/bg_02.png) no-repeat left bottom;background-size:100%;padding-bottom:40px;}
    #section02 > .sp{margin-bottom:10px;}
    #section02 .r-block .textarea{margin:18px 0 20px;}

    #section03 .l-block{margin-bottom:15px;}
    #section03 .l-block h2,#section03 .r-block h2{width:80%;margin-bottom:20px;}
    #section03 .textarea{margin-bottom:25px;}
    #section03 .r-block .images{width:70%;margin:0 auto;}
}
@media print, screen and (max-width:800px){
    #section01 .images img{width:100%;}
}


/* =====================
  btnarea
===================== */

#btnarea{background:url(http://www.itochu-artsquare.jp/permanent/img/bg_bottom01.png),url(http://www.itochu-artsquare.jp/permanent/img/bg_bottom02.png);background-position:left top,right top;background-repeat:no-repeat;padding:35px;position:relative;}
#btnarea .btn{text-align:center;}
#btnarea .btn a{background:#225283;color:#fff;font-size:22px;font-weight:bold;padding:24px 70px;text-decoration:none;display:inline-block;}
#btnarea .pagetop{position:absolute;bottom:-25px;right:0;}

@media print, screen and (max-width:767px){
    #btnarea{background:url(http://www.itochu-artsquare.jp/permanent/img/bg_bottom01.png),url(http://www.itochu-artsquare.jp/permanent/img/bg_bottom02.png);background-position:left bottom, 300px bottom;background-repeat:no-repeat;background-size:70%,60%;}
    #btnarea .btn a{font-size:16px;padding:15px 30px;margin:0 auto;}
    #btnarea .pagetop{bottom:10px;right:10px;}
}

/* =====================
  footer
===================== */

footer{background:#225283;color:#fff;padding:60px 0 10px;}
footer .info a{color:#fff;}
footer .info dt{font-size:25px;font-weight:bold;}
footer .copy{text-align:center;}

@media print, screen and (min-width:768px){
    footer .info{display:flex;justify-content:space-between;margin-bottom:28px;}
    footer .info dl{margin-right:25px;}
    footer .info .map{width:54%;}
    footer .info .map img{width:100%;max-width:530px;}
    footer .info .map p{margin-left:42%;}
}
@media print, screen and (max-width:767px){
    footer{padding:20px 0 10px;}
    footer dl,footer .info .map{margin-bottom:20px;}
    footer .info dt{font-size:18px;}
    footer .info .map img{width:100%;}
    footer .info .map p{margin-left:42%;font-size:12px;}
    footer .copy{font-size:10px;}
}


/* =====================
  en
===================== */

#en #mainarea dt{width:80px;float:left;}
#en #mainarea dd{margin-left:80px;}
#en #section01 .textarea{max-width:406px;margin:0 30px 0 20px;}
#en #section02 .r-block h2 img{max-width:390px;}
#en #section03 .l-block h2 img{max-width:300px;}
#en #section03 .r-block h2 img{max-width:313px;}
#en #section03 .r-block h2{margin-top:0;}
#en #section03 .l-block .textarea{max-width:380px;}
@media print, screen and (min-width:768px){
	#en #mainarea .lead{max-width:535px;padding-right:75px;}
  #en #mainarea h1{margin:-10px auto 0;padding-right:20px}
  #en #mainarea h1 img{max-width:560px;}
  #en #mainarea h1 .floatOuter{position: relative; max-width: 560px;margin: 0;padding:0;}
  #en #mainarea h1 .floatlink{bottom: 4.7%;left: 40%;width: 30.6%;height: 7.4%;}
}
@media print, screen and (max-width:767px){
  #en #mainarea h1{margin-top:20px;}
  #en #mainarea h1 .floatlink{bottom: 0;left: 40.2%;width: 30.7%;height: 8%;}
}

/* =====================
  tc
===================== */

#tc #section01 .textarea{max-width:406px;margin:0 30px 0 20px;}
#tc #section02 .r-block h2 img{max-width:438px;}
#tc #section02 .r-block .textarea{max-width: 430px;}
#tc #section03 .l-block h2 img{max-width:303px;}
#tc #section03 .r-block h2 img{max-width:313px;}
#tc #section03 .r-block h2{margin-top:0;}
#tc #section03 .l-block .textarea{max-width:380px;}
@media print, screen and (min-width:768px){
	#tc #mainarea .lead{max-width:575px;padding-right:42px;}
  #tc #mainarea h1{margin:-10px auto 0;padding-right:20px}
  #tc #mainarea h1 .floatOuter{position: relative; max-width: 560px;margin: 0;padding:0;}
  #tc #mainarea h1 img{max-width:568px;}
  #tc #mainarea h1 .floatlink{bottom: 7.2%;left: 70.8%;width: 17.6%;height: 11%;}
}
@media print, screen and (max-width:767px){
  #tc #mainarea h1{margin-top:20px;}
  #tc #mainarea h1 .floatlink{bottom: 7.4%;left: 70.6%;width: 16.8%;height: 12%;}
}