@charset "utf-8";

/**
 * パン屑リスト定義
 *
 * CSS versions	3
 *
 * @category   Web Application
 * @package    Argus
 * @copyright  2016 Polaris, Inc.
 *
 */
 #topic
{
	margin:1rem auto;
	width:100%;
    max-width:940px;
	text-align:left;
	font-weight:bold;
}
#topic h1
{
	display:inline;
	font-size:1rem;
	font-weight:bold;
}
#topic.maximum
{
	padding-left:1rem;
	max-width:100%;
}
@media screen and (min-width:0px) and (max-width:980px) 
{
	#topic
	{
        width:96%;
	}
}

/* CSS Document */

.sdgsArea {
  text-align: left;
		max-width: 900px;
		margin: 0 auto;
		font-size: 16px;
}

.sdgsArea>p {
  margin: 0px 0px 20px 0px;
}

.indexMessage {
  padding: 10px 20px;
  margin: 0px 0px 40px 0px;
  border: 1px solid #DEDEDE;
}

.indexMessage .inner {
  display: flex;
  flex-wrap: wrap;
}

.indexMessage .inner .textArea {
  margin: 0px 30px 0px 0px;
  max-width: calc(100% - 330px);
  width: 100%;
}

.indexMessage .inner .textArea .title {
  font-size: 22px;
}

.indexMessage .inner .img {
  width: 300px;
  display: flex;
  align-items: center;
}

.indexMessage .inner .img img {
  max-width: 100%;
}

.attemptArea {
  margin: 0px 0px 50px 0px;
  padding: 10px 0px;
}

.attemptArea .title {
  text-align: center;
  margin: 0px 0px 20px 0px;
  padding: 0px;
		font-size: 24px;
}

.attemptArea .wrapper {
  margin: 0px;
}

.attemptArea .wrapper .attemptBox {
  margin: 0px 0px 20px 0px;
  padding: 20px;
  border: 1px solid #DEDEDE;
}

.attemptArea .wrapper .attemptBox .inner {
  display: flex;
  flex-wrap: wrap;
}

.attemptArea .wrapper .attemptBox .inner .img {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 320px;
}

.attemptArea .wrapper .attemptBox .inner .img img {
  width: 150px;
  height: 150px;
  margin: 5px;
}

.attemptArea .wrapper .attemptBox .inner .text {
  max-width: calc(100% - 340px);
  width: 100%;
  margin: 0px 0px 0px 20px;
}

.attemptArea .wrapper .attemptBox .inner .text .title {
  text-align: left;
  margin: 0px 0px 10px 0px;
}

.attemptArea .wrapper .attemptBox .inner .text .t {
  margin: 0px 0px 10px 0px;
  padding: 0px 0px 10px 0px;
  border-bottom: 1px solid #DEDEDE;
  font-size: 16px;
}

.attemptArea .wrapper .attemptBox .inner .text .n {
  font-size: 14px;
  line-height: 18px;
  color: #777;
}

@media (max-width: 767px) {
			.sdgsArea {
			 padding: 0px 20px;
			}
  .indexMessage {
    padding: 10px;
    margin: 0px 0px 60px 0px;
  }
  .indexMessage .inner {
    display: block;
  }
  .indexMessage .inner .textArea {
    width: 100%;
    max-width: none;
    margin: 0px 0px 20px 0px;
  }
  .indexMessage .inner .textArea .title {
    font-size: 20px;
  }
		
  .indexMessage .inner .textArea .text {
    word-wrap: break-word;
  }
  .indexMessage .inner .img {
    width: auto;
  }
  .attemptArea .title {
    font-size: 20px;
  }
  .attemptArea .wrapper .attemptBox {
    padding: 10px;
  }
  .attemptArea .wrapper .attemptBox .inner {
    display: block;
  }
		.attemptArea .wrapper .attemptBox .inner .img {
		 text-align: center;
			max-width: none;
    width: 100%;
    margin: 0px 0px 10px 0px;
		}
  .attemptArea .wrapper .attemptBox .inner .text {
    max-width: none;
    width: 100%;
    margin: 0px;
  }
}