/*
=====================================================
  スマホの横向きの場合のスタイル
=====================================================
*/ 
/*スマホ横はロゴを消す*/

/* @media screen and (max-width: 896px) and (orientation: landscape){
.logo {
  display: none;
} */
  /*iPadロゴ*/
/* .mark {
  display: none;
} */

  /*スマホタイトル枠*/
/* .mainContainer .catch{
 display: none;
} */

/*スマホ［カテゴリー］*/
/* .catch .category {
display: none;
} */

/*スマホデザイン種類*/
/* .designType {
display: none;
}
} */

/*
=====================================================
  iPad
=====================================================
*/
@media screen and (max-width:768px){

/*iPadロゴ*/
.mark {
  width: 70px;
}

.logo {
  top:110px;
}

.imgSmal{
  width: 29%;
  margin:2%;
  z-index: 40;
}

/*ipadタイトル枠*/
.mainContainer .catch{
  padding: 90px 100px 60px 100px;
}
/*iPad［カテゴリー］*/
.catch .category {
}

/*iPadデザイン種類*/
.designType {
  margin-top: 24px;
}

/*iPad本文*/
.description {
  font-size: 1rem;
  line-height: 1.8rem;
  color: #533833;
  word-break: normal;/*区切れで自動改行*/
  text-align: left;
  padding-inline:100px;
}


.btn,
.komidashi{
  margin-left: 100px;
  margin-right: 90px;
}
.webServices{
  margin-left: 120px;
  margin-right: 100px;
}


/*大きい作品*/
.bigWrap{
  margin: 20px 100px 20px 100px;
}

.imgBig {
  width: 50%;
  margin-top: 0;
}

.imgBig:hover{
  transform: scale(1.4);	/*画像の拡大率*/
}
  
/*iPad小さい作品*/
.smallWrap {
  margin: 0 90px 120px 90px;
}

.imgSmal {
  width: 46%;
}

.imgSmal:hover {
  transform: scale(1.4);	/*画像の拡大率*/
}

/*注意書き*/
.caution{
  margin: 0 100px 0 100px;
}
}
  
/*
=====================================================
  スマホ
=====================================================
*/
@media screen and (max-width:450px){

  /*スマホ全体の枠*/
.mainContainer{
  margin: 0 56px 0 20px;
  overflow: clip;
  padding-bottom: 0;
}
  
/*スマホ左のロゴ*/
/*スマホロゴ*/
.mark {
  width: 45px;
}

.logo {
 display: none;
}
  
/*------------------------------------*/

/*スマホタイトル枠*/
.mainContainer .catch{
  padding: 50px 0 12px 0;
}

/*スマホ［カテゴリー］*/
.catch .category {
  font-size: 1rem ;
}

/*スマホデザイン種類*/
.designType {
  font-size: 1.1rem;
  margin-top: 12px;
}

/*デザイン種類小見出し*/
.komidashi{
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.2rem;
  text-align: left;
  margin: 20px 0 10px 0;
}

.komidashi::before{
  content: "● ";
  font-size: 0.6rem;
  vertical-align: 0.2rem;
}

/*スマホ本文*/
.description {
  font-size: 0.9rem;
  line-height: 1.4rem;
  text-align: justify;
  margin-top: 12px;
  padding-inline:0;
}

/*スマホ作品集枠*/
.mainContainer .imgWrap{
  margin-top: 230px;
  width: 100%;
  top: -220px;
  bottom: 10px;
}

/*スマホ大きい作品*/
.bigWrap{
  margin: 0 0 30px 0;
}

.imgBig {
  width: 100%;
  margin-top: 0;
}

.imgBig:hover{
  box-shadow: 0 0 0 0;
  transform: scale(1);	/*画像の拡大率*/
}
  
/*スマホ小さい作品*/
.smallWrap {
  width: 100%;
  margin: 0;
}

.imgSmal{
  width: 100%;
  margin: 0 0 30px 0;
}
  
.imgSmal:hover {
  box-shadow: 0 0 0 0;
  transform: scale(1);	/*画像の拡大率*/
} 

/*注意書き*/
.caution{
  margin: 0 50px 0 20px;
}

.btn,
.webServices{
  margin-left: 0;
  margin-right: 0;
}
.btn{
  margin-bottom: 40px;
}

.webServices ul li{
  letter-spacing: -.0000001em;
}


}